Переключение фона Javascript во всплывающем окне

Question

Переключение фона Javascript во всплывающем окне

1

У меня есть div, назначенный для запуска Javascipt, который открывает форму "PopUp" RSVP на моем сайте, однако я также хочу, чтобы накладывался черный фон на весь экран, когда окно появляется, чтобы скрыть остальную часть сайта.

Всплывающее окно отлично работает, используя следующее:

$(function() {
    // contact form animations
    $('#contact').click(function() {
    $('#contactForm').fadeToggle();
});

$(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the      container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();
    }
});

Поэтому я хочу привязать действие overlay к этой функции, чтобы он включал и выключал PopUpWindow. У меня уже есть div, назначенный с правильным CSS, мне просто нужно заставить его также переключать:

.sidebar-overlay {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,1);
    position: fixed;
    z-index: 3;
    display: none;
    cursor: e-resize;
}

Я немного застрял, поэтому любая помощь очень ценится. Спасибо

WolfmanLondon 08 дек. 2017, в 01:00

Источник

Теги:

javascript

1 ответ

Ещё вопросы

D.B. · Answer 1 · 2017-12-07T20-29-00.000Z

Я думаю, что в вашем скрипте вы проверяли, что клика по клику или нет, но тогда вы скрываете только форму, а не секцию боковой панели. Поэтому на самом деле это просто небольшое смешение, в котором используется селектор. (Я не могу быть позитивным, если это происходит, поскольку вы не включили разметку html в свой вопрос.)

Вот краткий пример с вашим кодом и соответствующим html. Только привязка боковой панели скрывается при щелчке по области документа.

  $('#contact').click(function() {
    var container = $(".sidebar-overlay");
    container.fadeToggle();
  });
  
  $(document).mouseup(function (e) {
    
    var container = $(".sidebar-overlay");
    var contactform = $("#contactForm");

    if (!contactform.is(e.target) // if the target of the click isn't the      container...
        && contactform.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();
    }
  });

.sidebar-overlay {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,1);
  position: fixed;
  z-index: 3;
  display: none;
  cursor: e-resize;
}
#contactForm{
  width:50%;
  margin:20px auto;
  padding:20px;
  background:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="contact">click</button>

<div class="sidebar-overlay">

<form id="contactForm">
This is my form<br />
field 1 ______<br />
field 2 ______<br />
</form>

</div>

Спасибо за это, но странно, хотя код работает отлично, когда он пробует его на «фрагменте кода запуска», здесь он абсолютно ничего не делает на моем сайте ... Я понятия не имею, почему
Если вы хотите, может быть, вы можете предоставить html и скрипт всей вашей страницы, чтобы было больше информации, чтобы посмотреть. Из того, что вы объяснили, я уверен, что есть простое решение.