jquery 模态窗口 弹出窗 simpleModal

image.png

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SimpleModal Basic Modal Dialog </title> <link type='text/css' href='css/demo.css' rel='stylesheet' /> <link type='text/css' href='css/box.css' rel='stylesheet' /> </head> <body> <div id='container'>

<div id='logo'>
    <h1>Simple<span><a href="http://www.ericmmartin.com/projects/simplemodal-demos/">Modal</a></span></h1>
    <span class='title'>一个简单的遮罩层,可以制作提示框,对话框,弹出层,弹出iframe等...</span>
</div>
<div id='content'>
    <div id='basic-modal'>
        <p>提示框-ok:<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok'/> or <a href='#' class='open-basic-dialog-ok'>Demo</a></p>
        <p>提示框-warn:<input type='button' name='basic' value='Demo' class='open-basic-dialog-warn'/> or <a href='#' class='open-basic-dialog-warn'>Demo</a></p>
        <p>弹出iframe:<input type='button' name='basic' value='Demo' class='open-basic-ifr'/> or <a href='#' class='open-basic-ifr'>Demo</a></p>
    </div>
</div>

<!-- 弹出内容 -->

<div id="basic-dialog-ok">
    <!-- 普通弹出层 [[ -->  
    <div class="box-title show"><h2>提示</h2></div>  
    <div class="box-main">
        <div class="tips">      
            <span class="tips-ico">
                <span class="ico-ok"><!-- 图标class可以为: ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait --></span>
            </span>      
            <div class="tips-content">        
                <div class="tips-title">申请成功,我们将短信通知您!</div>        
                <div class="tips-line"></div>     
            </div>    
        </div>
        <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
    </div>  
    <!-- 普通弹出层 ]] -->
</div>

<div id="basic-dialog-warn">
    <!-- 普通弹出层 [[ -->  
    <div class="box-title show"><h2>提示</h2></div>  
    <div class="box-main">
        <div class="tips">      
            <span class="tips-ico">
                <span class="ico-warn"><!-- 图标 --></span>
            </span>      
            <div class="tips-content">        
                <div class="tips-title">系统繁忙,请稍候重试</div>        
                <div class="tips-line"></div>     
            </div>    
        </div>
        <div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
    </div>  
    <!-- 普通弹出层 ]] -->
</div>

<div id="ifr-dialog" >
    <!-- iframe弹出层 [[ -->  
    <iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>
    <!-- iframe弹出层 ]] -->
</div>

</div> <script type="text/javascript" src="../../scripts/jquery.js" ></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script > jQuery(function (

('.open-basic-dialog-ok').click(function (e) {

('.open-basic-dialog-warn').click(function (e) { $('#basic-dialog-warn').modal(); return false; });

$('.open-basic-ifr').click(function (e) {
    showIframe("http://www.baidu.com","ifr-dialog-content");
    return false;
});

});

/* eg:showIframe */ function showIframe(src , id ){

('#ifr-dialog').modal({opacity:30,"overlayClose":true,"containerId":id }); }

</script> </body> </html>

box.css

*{margin:0;padding:0;}

/* element */

basic-dialog-ok,#basic-dialog-warn,#ifr-dialog{

display:none;

} /* Overlay */

simplemodal-overlay {background-color:#000;}

.simplemodal-wrap{background-color:#fff;}

/* Container */

simplemodal-container {

height:153px; 
width:500px;

}

ifr-dialog-content{

height:300px; 
width:700px;

}

.simplemodal-container .ico-ok, .simplemodal-container .ico-error, .simplemodal-container .ico-info, .simplemodal-container .ico-question, .simplemodal-container .ico-warn, .simplemodal-container .ico-wait,.simplemodal-container .modalCloseImg,.simplemodal-container .btn-close, .simplemodal-container .btn-close-b{background:url(../img/box.png) no-repeat;display:inline-block;width:32px;height:32px;} .simplemodal-container .ico-ok{background-position:-66px 0;} .simplemodal-container .ico-error{background-position:0 0;} .simplemodal-container .ico-info{background-position:-33px 0;} .simplemodal-container .ico-question{background-position:-99px 0;} .simplemodal-container .ico-warn{background-position:-165px 0;} .simplemodal-container .ico-wait{background-position:-132px 0;}

.simplemodal-container .tips{padding:34px 0 0;} .simplemodal-container .tips-ico{float:left;position:relative;top:-9px;width:auto;padding-left:5%;margin-right:16px;_margin-right:13px;text-align:right;} .simplemodal-container .tips-content{overflow:hidden;height:1%;padding-right:5%;} .simplemodal-container .tips-title, .simplemodal-container .tips-line{padding:0 0 8px;} .simplemodal-container .tips-title{font-weight:700;font-size:14px;} .simplemodal-container .tips-line{line-height:20px;} .simplemodal-container .font-red{color:#c00;} .simplemodal-container .tips-buttons{margin-top:23px;text-align:right;} .simplemodal-container .tips-buttons .btn-blue, .simplemodal-container .tips-buttons .btn-blue-s, .simplemodal-container .tips-buttons .btn-white, .simplemodal-container .tips-buttons .btn-white-s{margin-right:16px;}

.simplemodal-container{position:relative;height:100%;*width:100%;margin:-9px;padding:9px;font-size:12px;line-height:1.5;background-color:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);} .simplemodal-container .btn-close{background-position:-286px 0;position:absolute;z-index:1;right:13px;top:13px;width:16px;height:16px;overflow:hidden;text-indent:-99em;text-decoration:none;} .simplemodal-container .btn-close:hover{background-position:-302px 0;} .simplemodal-container .btn-close-b{background-position:-249px 0;position:absolute;z-index:1;right:17px;_right:19px;top:19px;width:18px;height:18px;overflow:hidden;text-indent:-99em;text-decoration:none;} .simplemodal-container .btn-close-b:hover{background-position:-267px 0;}

.box-title{position:relative;border:1px solid #369;border-bottom:none;margin:-1px -1px 0;background-color:#EBF2FA;padding:1px 0;} .box-title h2{height:2em;line-height:2em;color:#666;font-size:100%;text-indent:12px;} .simplemodal-data{height:100%;overflow:hidden;} .box-main{position:relative;background-color:#fff;border:1px solid #369;margin:0 -1px -1px;border-top:none;zoom:1;} .box-buttons{margin-top:23px;padding:0 9px 9px 0;text-align:right;} .box-buttons button{margin-left:8px;min-width:68px;min-width:52px\9;min-width:auto;height:24px;padding:0 5px 1px;padding:0 10px 1px;} .simplemodal-container iframe.box-iframe{position:relative;height:100%;width:100%;margin:-1px;overflow:hidden;border:1px solid #6685A2;background-color:#fff;}

.simplemodal-container .modalCloseImg{ background-position:-286px 0; position:absolute; right:13px; top:13px; width:16px; height:16px; overflow:hidden; text-indent:-99em; text-decoration:none; cursor:pointer; display:inline; z-index:3200; } .simplemodal-container .modalCloseImg:hover{background-position:-302px 0;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏测试邦

后selenium时代Web UI自动化测试框cypress

优点:selenium 的 API 封装遵循 W3C 提供的 webdriver 标准,很好的支持主流浏览器chrome,firefox,IE,Safari等,...

14220
来自专栏Java架构沉思录

预防XSS,这几招管用!

大家应该都听过 XSS (Cross-site scripting) 攻击问题,或多或少会有一些了解,但貌似很少有人将这个问题放在心上。一部分人是存有侥幸心理:...

13240
来自专栏老码农的一亩三分地

IT兄弟连 JavaWeb教程 文件上传技术

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

7120
来自专栏好好学java的技术栈

几个IDEA的NB插件,还带动态图的。

一款热部署插件,只要不是修改了项目的配置文件,用它都可以实现热部署。收费的,破解比较麻烦。不过功能确实很强大。算是开发必备神器了。热部署快捷键是control+...

6930
来自专栏前端劝退师

90行代码,15个元素实现无限滚动

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

17920
来自专栏智能计算时代

「首席架构师推荐」React生态系统大集合

16720
来自专栏C语言入门到精通

基础知识 | 每日一练(120)

小林:老版的 toupper() 和 tolower() 不一定能够正常处理不需要转换的字符参数,例如数字、标点或已经符合请求的字符。在 ANSI/ISO 标准...

9130
来自专栏老码农的一亩三分地

IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

9430
来自专栏老码农的一亩三分地

IT兄弟连 JavaWeb教程 JSTL常用标签

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

8010
来自专栏Core Net

ASP.NET Core 2.2 : 二十一. 内容协商与自定义IActionResult和格式化类

上一章的结尾留下了一个问题:同样是ObjectResult,在执行的时候又是如何被转换成string和JSON两种格式的呢?

7920

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励