Убрать фон, когда появляется модал

Question

Убрать фон, когда появляется модал

0

Я использую jQuery CustomBox modal, и все работает нормально. Тем не менее, я пытаюсь "скрыть содержимое div за модальным после того, как оно появилось. Затем я хочу, чтобы содержимое div снова появилось после закрытия модальности. Вот рабочий пример:

DEMO

Я только что смотрел видео jQuery из css-трюков, но все еще имею проблемы с попыткой заставить это работать :) Любая помощь очень ценится!

EDIT: я хочу, чтобы содержимое div снова появлялось, когда модальная функция закрыта вне модального экрана, а также фактическая кнопка "x".

EDIT: фактическая веб-страница здесь

Нажмите "CLICK ME", и вы можете увидеть, что модальные всплывающие окна выглядят отлично, однако, Id нравится ТОЛЬКО фоновое изображение подвала, а не страница под ним.

Какие-либо предложения?? Благодарю!

Darron Donaldson 17 апр. 2014, в 17:21

Источник

0

Можете показать какой-нибудь код?
Dean.DePue 17 апр. 2014, в 15:02
0

Для этого нужно использовать toggle() , но вам нужно опубликовать код, ваша pen не работает
rockStar 17 апр. 2014, в 15:06
0

Ссылка не работает. Пожалуйста, предоставьте стандартную ссылку Codepen.
Paulie_D 17 апр. 2014, в 15:06
1

@rockStar Не toggle() устарела?
Paulie_D 17 апр. 2014, в 15:07
0

@Paulie_D: тогда бы использовать другие :)
rockStar 17 апр. 2014, в 15:09
0

.hide () и .show () и обратные вызовы - ваши друзья :).
zozo 17 апр. 2014, в 15:16
0

Я только что отредактировал ссылку, и эта работает нормально.
Darron Donaldson 17 апр. 2014, в 17:16

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

modal-dialog

css

2 ответа

Ещё вопросы

Можете показать какой-нибудь код?
Для этого нужно использовать toggle() , но вам нужно опубликовать код, ваша pen не работает
Ссылка не работает. Пожалуйста, предоставьте стандартную ссылку Codepen.
@Paulie_D: тогда бы использовать другие :)
.hide () и .show () и обратные вызовы - ваши друзья :).
Я только что отредактировал ссылку, и эта работает нормально.

Darron Donaldson · Answer 1 · 2014-04-21T05-44-00.000Z

Поэтому я понял это. Все, что мне нужно было сделать, это разместить изображение подвала, как это, и это сработало. Я знаю, что это, вероятно, не лучшее решение, но я в порядке с ним :)

.custombox-show ~ .custombox-overlay {
    opacity: 1;
    background: url(../images/img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

4dgaurav · Answer 2 · 2014-04-17T14-54-00.000Z

  $(document).ready(function(){
    $("#fadein").click(function(){
      $("#foo").hide();
    });
    $("#showFoo").click(function(){
      $("#foo").show();
    });
  });

DEMO

редактировать

HTML

<button type="button" class="close" id="close-mod" onclick="$.fn.custombox('close'); myfunction();">&times;</button>

JS

function myfunction() {
    $("#foo").show();
};

$(document).ready(function(){
   $("#fadein").click(function(){
     $("#foo").hide();
   });
});

DEMO

Редактирование CSS для непрозрачности цвета фона .custombox-overlay

Заключительный ДЕМО

.custombox-show ~ .custombox-overlay {
  background-color: black !important;
  opacity:1;
}

спасибо, это работает, когда модал закрывается с помощью кнопки 'x', но не так сильно, когда нажимается внешний экран :( Есть предложения?
Я сделал правку, выполните до конца.
Благодарю. Пробовал это, но div не появляется при нажатии за пределами модальной.
Я думаю, это должно решить вашу цель.