前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 模态窗口 弹出窗 simpleModal

jquery 模态窗口 弹出窗 simpleModal

作者头像
用户5760343
发布2019-10-10 14:34:06
6.3K0
发布2019-10-10 14:34:06
举报
文章被收录于专栏:sktj

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'>

代码语言:javascript
复制
<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) {

('#basic-dialog-ok').modal(); return false; });
('#basic-dialog-ok').modal(); return false; });

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

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

});

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

("#ifr-dialog-container").attr("src",src);
("#ifr-dialog-container").attr("src",src);

('#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{

代码语言:javascript
复制
display:none;

} /* Overlay */

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

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

/* Container */

simplemodal-container {

代码语言:javascript
复制
height:153px; 
width:500px;

}

ifr-dialog-content{

代码语言:javascript
复制
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;}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.10.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • box.css
  • basic-dialog-ok,#basic-dialog-warn,#ifr-dialog{
  • simplemodal-overlay {background-color:#000;}
  • simplemodal-container {
  • ifr-dialog-content{
相关产品与服务
短信
腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档