jQuery点击弹出层弹出模态框点击模态框消失代码分享
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>jQuery弹出层 模态框</title>
<script src="./jquery.min.js" type="text/javascript"></script>
<style>
.btn{
height:100px;
}
.black_over{
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
top: 0;
left: 0;
right: 0;
left: 0;
margin: auto;
background-color: rgba(0,0,0,0.8);
}
.white_content {
display: none;
position: fixed;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
$(function () {
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var _windowHeight = $(window).height(),//获取当前窗口高度
_windowWidth = $(window).width(),//获取当前窗口宽度
_popupHeight = $("#"+show_div).height(),//获取弹出层高度
_popupWeight = $("#"+show_div).width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2;
_posiLeft = (_windowWidth - _popupWeight)/2;
$("#"+show_div).css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};
$(".btn").click(function () {
var src = $(this).attr("src");
$("#showcont").attr("src",src);
ShowDiv('MyDiv','fade')
});
$("#fade").click(function () {
CloseDiv('MyDiv','fade')
});
});
</script>
</head>
<body>
<!--<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />-->
<!--图片请换成自己的，点击图片弹出-->
<img src="tu.png" alt="sd" class="btn" >
<img src="pic.jpg" alt="sd" class="btn" >
<!--弹出层时背景层DIV-->
<div id="fade" class="black_over">
</div>
<!--弹出层的内容-->
<div id="MyDiv" class="white_content">
<img src="tu.png" alt="" id="showcont">
</div>
</body>
</html>
以上所述是小编给大家介绍的jQuery点击弹出层弹出模态框点击模态框消失代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍js点击任意区域弹出层消失实现代码，包括了js点击任意区域弹出层消失实现代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js点击任意区域弹出层消失的具体代码，供大家参考，具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面，否则让弹出层消失。 完整代码 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望
-
本文向大家介绍jQuery中ztree 点击文本框弹出下拉框的实例代码，包括了jQuery中ztree 点击文本框弹出下拉框的实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，具体代码如下所示： 以上所述是小编给大家介绍的jQuery中ztree 点击文本框弹出下拉框的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
-
本文向大家介绍BootStrap中的模态框（modal，弹出层）功能示例代码，包括了BootStrap中的模态框（modal，弹出层）功能示例代码的使用技巧和注意事项，需要的朋友参考一下 bootstrap中的模态框（modal），不同于Tooltips，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的
-
本文向大家介绍jQuery弹出框代码封装DialogHelper，包括了jQuery弹出框代码封装DialogHelper的使用技巧和注意事项，需要的朋友参考一下 看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭，写出的代码有点拧巴，需要再封装一下！于是就有了下面这个简单的DialogHelper辅助类，因为这篇文章分享的重点是思路，所以目前版本的代码也还非常粗糙。思路对
-
问题内容： 我不确定如何在我的方法中编写弹出消息框的代码。 我试图在我的方法中使用它，但是它不起作用： 问题答案： javax.swing.JOptionPane 这是我想弹出一个信息框时所调用的方法的代码，它将占据屏幕，直到被接受为止： 第一个参数（在此示例中）用于对齐对话框。使其在屏幕上居中，但是可以指定任何内容，而对话框将显示在屏幕中央。 我倾向于使用String来描述调用该框的代码在哪里，
-
本文向大家介绍jQuery实现页面点击后退弹出提示框的方法，包括了jQuery实现页面点击后退弹出提示框的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现页面点击后退弹出提示框的方法。分享给大家供大家参考，具体如下： demo.js： demo.html： 运行效果图如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQue