Question

接下来是我的问题。

我想阻止打开第二个弹出窗口，而第一个窗口是活动的。我希望在超过2个窗口（模态）上实现这一点，让我们说5或6。

有谁知道我怎么能实现这个目标？

感谢您的帮助。

以下是代码：

-HTML：

<!-- Buttons -->
<button class="trigger_1">Image 1</button>
<button class="trigger_2">Image 2</button>
<button class="trigger_3">Image 3</button>
<!-- / Buttons -->

<!-- Popup 1 -->
<div id="popup_1">

<!-- Popup 1 img -->
<img src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg" />
<!-- / Popup 1 img -->

<!-- Button placeholder -->
<div id="button_placeholder">

<!-- Button placeholder button -->
<button class="close x_1">Close [ x ]</button>
<!-- / Button placeholder button -->

</div>
<!-- / Button placeholder -->

</div>
<!-- / Popup 1 -->

<!-- Popup 2 -->
<div id="popup_2">

<!-- Popup 2 img -->
<img src="http://7.media.tumblr.com/tumblr_kuuspiVq8D1qzn34eo1_500.jpg" />
<!-- / Popup 2 img -->

<!-- Button placeholder -->
<div id="button_placeholder">

<!-- Button placeholder button -->
<button class="close x_2">Close [ x ]</button>
<!-- / Button placeholder button -->

</div>
<!-- / Button placeholder -->

</div>
<!-- / Popup 2 -->

<!-- Popup 3 -->
<div id="popup_3">

<!-- Popup 3 img -->
<img src="http://29.media.tumblr.com/tumblr_ljyn38rIqC1qg2exfo1_500.jpg" />
<!-- / Popup 3 img -->

<!-- Button placeholder -->
<div id="button_placeholder">

<!-- Button placeholder button -->
<button class="close x_3">Close [ x ]</button>
<!-- / Button placeholder button -->

</div>
<!-- / Button placeholder -->

</div>
<!-- / Popup 3 -->

-CSS：

/* Popup 1 */
#popup_1 {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 33%;
height: auto;
background-color: #fff;
-webkit-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-moz-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-ms-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
z-index: 100;
display: none; }

/* Popup 2 */
#popup_2 {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 33%;
height: auto;
background-color: #fff;
-webkit-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-moz-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-ms-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
z-index: 100;
display: none; }

/* Popup 3 */
#popup_3 {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 33%;
height: auto;
background-color: #fff;
-webkit-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-moz-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
-ms-box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
box-shadow: 0 0 0 10px rgba(51,51,51,0.1);
z-index: 100;
display: none; }

/* Popup img */
img {
float: left;
margin-top: 0;
margin-left: 0;
width: 100%;
height: auto; }

/* Button placeholder */
#button_placeholder {
float: left;
margin-top: 0;
margin-left: 0;
width: 100%;
height: auto; }

/* Button placeholder button */
#button_placeholder .close {
margin: 15px auto;
padding: 7px 9px;
font-size: 16px;
color: #fff;
background-color: #ff48a1;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
border: none;
outline: none;
display: block;
cursor: pointer; }

/* Button placeholder button (hover effect) */
#button_placeholder .close:hover {
background-color: #333; }

-JavaScript：

// When everything is ready...
$( document ).ready(function() {

// Modal 1 mechanism:
$('.trigger_1').click(function(e) {
e.preventDefault();
modal1();
});

$('.x_1').click(function() {
$('#popup_1').fadeOut() });

function modal1() {
$('#popup_1').fadeIn(); }
// End.


// Modal 2 mechanism:
$('.trigger_2').click(function(e) {
e.preventDefault();
modal2();
});

$('.x_2').click(function() {
$('#popup_2').fadeOut() });

function modal2() {
$('#popup_2').fadeIn(); }
// End.


// Modal 3 mechanism:
$('.trigger_3').click(function(e) {
e.preventDefault();
modal3();
});

$('.x_3').click(function() {
$('#popup_3').fadeOut() });

function modal3() {
$('#popup_3').fadeIn(); }
// End.

});
// End.

问候，米兰。

Answer 1

设置这些条件以防止多次弹出：

function modal1() {
    if ($("#popup_2").is(":hidden")){
        $('#popup_1').fadeIn();
    }
    else{/*do something*/}
}


function modal2() { 
    if ($("#popup_1").is(":hidden")){
        $('#popup_2').fadeIn();
    }
    else{/*do something*/}
}

更好的方法是使用类：

function modal(element){
    if ($(".pop_up_open").length == 0){
         $(element).fadeIn();
         $(element).addClass("pop_up_open");
    }
    else{/*do something*/}
}
function modalClose(){/*this function will run when you want to close function*/
         $(".pop_up_open").fadeOut();
         $(".pop_up_open").removeClass("pop_up_open");
}

<强> Updated Fiddle

使用这些函数来弹出一个你想要打开和关闭的元素，而不是很多函数。

$(document).ready(function () {
    $('.trigger_1').click(function (e) {
        e.preventDefault();
        modal("#popup_1");
    });
    $('.x_1').click(function () {
        modalClose();
    });
    $('.trigger_2').click(function (e) {
        e.preventDefault();
        modal("#popup_2");
    });
    $('.x_2').click(function () {
        modalClose();
    });
    $('.trigger_3').click(function (e) {
        e.preventDefault();
        modal("#popup_3");
    });
    $('.x_3').click(function () {
        modalClose();
    });
});

如何防止打开多个弹出窗口？

1 个答案: