jquery的SimpleModal插件的使用

最新推荐文章于 2017-10-13 17:03:32 发布

guwen1991

最新推荐文章于 2017-10-13 17:03:32 发布

阅读量988

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/oGuWen1/article/details/12657329

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="../jquery.min.js"></script>
<script src="../jquery.simplemodal-1.4.4.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$("#mydiv").modal();
})
}
);
</script>

<style>
#mydiv{
  display:none;
}
#simplemodal-overlay {background-color:#000;}
#simplemodal-container {height:200px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container a.modalCloseImg {background:url(simplemodal-demo/simplemodal-demo-basic-1.4.4/basic/img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
.STYLE1 {
	font-size: larger;
	font-weight: bold;
}
</style>
</head>
<body>
<button id="btn">执行</button>
<div id="mydiv">
 <h1>提示</h1>
 <div>这是模态窗口提示的内容！</div>
 <div align="right"><a class="simplemodal-close STYLE1">关闭</a> </div>
</div>
</body>
</html>

完整的HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head> … </head>
        <body>
            <button id="btn">

                执行

            </button>
            <span id="simplemodal-placeholder" style="display: none;"></span>
            <div id="simplemodal-overlay" class="simplemodal-overlay" style="opacity: 0.5; height: 171px; width: 1366px; position: fixed; left: 0px; top: 0px; z-index: 1001;"></div>
            <div id="simplemodal-container" class="simplemodal-container" style="position: fixed; z-index: 1002; height: 200px; width: 600px; left: 367px; top: -30.5px;">
                <a class="modalCloseImg simplemodal-close" title="Close"></a>
                <div class="simplemodal-wrap" tabindex="-1" style="height: 100%; outline: 0px none; width: 100%; overflow: visible;">
                    <div id="mydiv" class="simplemodal-data" style="display: block;">
                        <h1> … </h1>
                        <div> … </div>
                        <div align="right"> … </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

guwen1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery的SimpleModal插件的使用

无标题文档$(function(){$("#btn").click(function(){$("#mydiv").modal();})});#mydiv{ display:none;}#simplemodal-overlay {background-color:#000;}#simplemodal-container {heig
复制链接

扫一扫

专栏目录