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

<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; });

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

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;}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.10.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站

jquery ui

javascript

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

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

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

网站

jquery ui

javascript

登录后参与评论

0 条评论

热度