jQuery Custom弹出问题
[英]jQuery Custom pop up issue
问题描述
I am trying to create a custom css and jQuery popup but its not working properly.Please see my code below and let me know where I am wrong? 
我正在尝试创建自定义的CSS和jQuery弹出窗口，但无法正常工作。请查看下面的代码，让我知道我在哪里错了？ I want if someone click on "Click Me" button a popup will open and if user click outside the popup then popup will hide. 我想如果有人单击“单击我”按钮，则将弹出一个弹出窗口，如果用户在弹出窗口之外单击，则弹出窗口将隐藏。
I have already included jQuery in my code. 我已经在代码中包含了jQuery。 Here is my code: 这是我的代码：
<style>
.maskarea {
width: 100%;
height:700px;
background: rgba(255, 255, 255, .7);
position: fixed;
left: 0;
top: 0;
display:none;
}
.popup {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
background: #ccc;
margin-left: -150px;
top: 50%;
margin-top: -150px;
}
</style>
<script>
$(function(){
$(".hit").click(function(){
$(".maskarea").show();
})
})
</script>
</head>
<body>
<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
<div class="popup">
</div>
</div>
</body>
3 个解决方案
解决方案1
4 2015-12-07 17:37:22
1st : you need to create click event if user click on .maskarea hide it 1：如果用户单击.maskarea，则需要创建click事件
2nd : another click event for .popup div to prevent .maskarea click 第二： .popup div的另一个单击事件，以防止.maskarea单击
try this 尝试这个
$(function(){
$(".hit").click(function(){
$(".maskarea").show();
});
// if user click on .maskarea hide it
$('.maskarea').on('click', function(){
$(this).hide();
});
// use e.stopPropagation(); for .popup div to prevent .maskarea click
$('.popup').on('click', function(e){
e.stopPropagation();
});
})
read about e.stopPropagation() 了解有关e.stopPropagation（）的信息
解决方案2
2 2015-12-07 17:42:44
You were almost there, all you were missing out on was the close handler. 您快要在那里了，您所缺少的只是近距离处理程序。 Here's an example pen . 这是一支示例笔 。
Using the following HTML 使用以下HTML
<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
<div class="popup">
</div>
</div>
With this CSS 有了这个CSS
.maskarea {
width: 100%;
height: 700px;
background: rgba(255, 255, 255, .7);
position: fixed;
left: 0;
top: 0;
display: none;
}
.popup {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
background: #ccc;
margin-left: -150px;
top: 50%;
margin-top: -150px;
}
And this JS 还有这个JS
$(function() {
$(".hit").click(function() {
$(".maskarea").show();
});
$(".maskarea").click(function() {
$(this).hide();
});
$('.popup').on('click', function(e){
e.stopPropagation();
});
});
You should be able to have a functioning popup. 您应该能够运行正常的弹出窗口。
解决方案3
0 已采纳 2015-12-07 17:43:11
You can use various jquery plugins for popup like fancybox, lightbox etc. but if you want to use your custom code you can code your popup like : 您可以将各种jquery插件用于fancybox，lightbox等弹出窗口，但是如果您想使用自定义代码，则可以将弹出窗口编写为：
<style>
.maskarea {
width: 100%;
height:700px;
background: rgba(255, 255, 255, .7);
position: fixed;
left: 0;
top: 0;
display:none;
}
.popup {
width: 300px;
height: 300px;
position: fixed;
left: 50%;
background: #ccc;
top: 50%;
}
</style>
<script>
$(function(){
$(".hit").click(function(){
var windowHeight = $(window).height(); //Get current height of window or screen
var popup = $(".popup"); //cache the popup
var marginTop = '-'+parseInt(popup.height()/2)+'px'; //Dynamically get height of a popup div, and make it half for negative margin
var marginLeft = '-'+parseInt(popup.width()/2)+'px'; //Dynamically get width of a popup div, and make it half for negative margin
popup.css({'margin-left':marginLeft,'margin-top':marginTop});
$(".maskarea").height(windowHeight).show(); //assign windows height to maskarea
})
$(document).mouseup(function(e){
var box = $('.popup');
if(!box.is(e.target)&&box.has(e.target).length===0){
$('.maskarea').hide();
}
})
})
</script>
<body>
<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
<div class="popup">
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.