专栏首页sktjjquery 模态窗口 弹出窗 simpleModal

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 条评论
登录 后参与评论

相关文章

  • bootstrap 网站样式 常用

    用户5760343
  • bootstrap switch控件

    需要使用Bootstrap switch,实现通过、拒绝功能并且在开关至拒绝时,显示textarea框输入原因。

    用户5760343
  • bootstrap 中的 less

    Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。

    用户5760343
  • 说说几个 API 和应用案例

    除了 classList.contains 方法之外,还有一个 node.contains 方法,这个方法返回的是一个布尔值,来表示传入的节点是否为该节点的后代...

    多云转晴
  • Vue之插槽Slot理解

    刚开始看的时候,以为Vue的插槽和React一样,我定睛一看,md原来不对,怎么越看越像React的props.children属性,但是比React这个属性要...

    憧憬博客
  • js验证码倒计时

    IT故事会
  • 学习|Unity3D使用协程实现减速停车效果

    上一篇《学习|Unity3d的导航实现循环线路移动》讲了一下定制循环行驶路线的方法,在视频中还有一个就是非会员的车辆需要人工收费,所以就要有一个减速停车等待的动...

    Vaccae
  • 不修漏洞触犯刑法——一个int类型引发的游戏漏洞

    下面转载原文:“网络服务提供者不履行法律、行政法规规定的信息网络安全管理义务,经监管部门责令采取改正措施而拒不改正……处三年以下有期徒刑、拘役或者管制”。

    WeTest质量开放平台团队
  • 微信小程序服务器配置基础教程

    微信小程序的服务器配置需要域名备案和上https的。我用的域名是腾讯学生认证的免费域名,腾讯云也可以申请https证书https证书申请好了以后会有一个证书文件...

    flytam
  • 如何用 1 张图说 100 次我爱你?这个小程序帮你搞定

    本期,知晓程序推荐的「字云」小程序,就能帮你用文字一键生成「图文并茂」的个性图片。

    知晓君

扫码关注云+社区

领取腾讯云代金券