如何防止打开多个弹出窗口
How to prevent opening multiple popup windows?
接下来是我的问题。
我想防止在第一个弹出窗口处于活动状态时打开第二个弹出窗口。我想在超过 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.
问候,米兰。
设置以下条件以防止多个弹出窗口打开:
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");
}
更新的小提琴
而不是许多函数使用这些函数来pop_up要打开和关闭的元素。
$(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();
});
});
相关文章:
- 防止Iframe窗体在新窗口中打开
- 如何防止firefox在打开大型弹出窗口时滚动到页面底部
- 当移动地址栏出现/消失时,防止更改窗口高度
- 使用javascript防止其他弹出窗口
- HTML 框架 - 防止引导弹出窗口在用户单击正文时消失
- 如何防止高图工具提示弹出隐藏,在图形区域或浏览器窗口上调整大小
- 如何防止剑道网格弹出编辑器窗口打开
- 防止多次显示弹出窗口.Ajax添加结果已在DOM中注册
- 通过防止窗口事件问题防止双重提交
- 防止打开弹出窗口时出现页面滚动条
- 如何防止 javascript 警报更改活动窗口
- 检测 Chrome 浏览器窗口的宽度和高度,以防止元素溢出
- 防止主窗口在 Facebook 应用程序上使用箭头键时滚动
- 灯箱演变防止窗口滚动问题
- 如何防止 JQuery 在弹出窗口中点击取消后执行
- 如何防止 iframe 访问父窗口,但允许父窗口访问 iframe 文档
- 在网格弹出编辑器中上传剑道:如何防止上传抛出异常时窗口关闭
- 如何在使用JQuery显示弹出窗口时防止在asp按钮上回发
- Rails 4模态窗口(弹出窗口):如何防止在选择下拉项时接近
- 从弹出窗口提交表单到新选项卡,然后关闭弹出窗口,防止表单提交