zoukankan      html  css  js  c++  java
  • 几种样式的弹窗示例

    一. 标题+内容+关闭按钮

    示例代码:

    <style type="text/css">
    .pop_cov {z-index: 20000;left: 50%;top: 50%;width: 192px;height: 112px;position: fixed;display:block;}
    .pop_body {background-color: #fefefe;font-family: 微软雅黑;left: -50%;top: -50%;position: absolute;border: 1px solid #000;}
    .pop_title {height: 18px;color: #fff;background: #000;padding: 8px;}
    .pop_content {height: 30px;width: 150px;padding: 20px;color: #000;padding-bottom: 23px;}
    .pop_title a {background: url(dlg-close.gif) -15px 4px no-repeat;width: 15px;height: 20px;cursor: pointer;float: right;}
    .pop_title h4 {margin:0px;float:left;}
    </style>
    <div class="pop_cov" id="pop_cov">
        <div class="pop_body">
            <div class="pop_title"><h4>标题</h4><a onclick="document.getElementById('pop_cov').style.display='none'"></a></div>
            <div class="pop_content">内容</div>
        </div>
    </div>

    二. 蒙版+半透明边框弹窗

    示例代码:

    <!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>
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">  
    #Body{ z-index:1; display:block;height:1000px;}
    /*蒙版样式*/
    #Cover{ z-index:2; display:block; position:fixed;width:100%;height:100%;left:0;top:0; background-color:Black;opacity: 0.5;z-index:999;}
    /*弹窗样式*/
    #pop_cov{left:50%;top:50%;display: block; width: 362px; height: 192px; position:fixed;}
    .Pop{background-color:rgba(255, 255, 255, 0.3);font-family: 微软雅黑; padding:10px; position:relative;left:-50%;top:-50%;z-index:9999;}
    .popMain{height: 172px;background: white;}
    .btnClose {width: 13px;height: 13px;position: absolute;overflow: hidden;right: 20px;top: 20px;background: url(http://image.xzyd.net/66/image/editor/20131216/20131216141248.png);cursor: pointer;}
    </style>
    <script language="javascript" type="text/javascript">
    //激发弹出弹窗的函数
    function btnPop_onclick() {
        var cover = "<div id='Cover' onclick='btnClose_onclick()'></div>";
        $("body").append(cover);
        var pop = "<div id='pop_cov'></div>";
        $("body").append(pop);
        $("#pop_cov").append("<div class='Pop'>"
        +"<div class='btnClose'  onclick='return btnClose_onclick()'> </div>"
        +"<div class=' popMain'><div style='padding:60px;'>带有蒙版的弹窗效果!</span></div></div></div>");
    }
    //关闭弹窗的函数
    function btnClose_onclick() {
        $("#Cover").remove();
        $("#pop_cov").remove();
    }
        </script>
    </head>
    <body>
        <!--主体层-->
        <h1>点击任意图片弹出弹窗,点击弹窗图片即可关闭弹窗</h1>
        <br />
        <h3>弹窗弹出后,原窗体内容变暗,滚动鼠标滑轮,页面仍可滑动,但不可对原页面内容进行操作</h3>
        <h3>点击弹窗后,弹窗消失,页面恢复初始状态</h3>
        <div id="Body">
            <img src="http://xzydv6.test.mall.zsb2cweb.com/66/image/ad/20131216/20131216100605.jpg" title='点击图片打开弹窗'  onclick="return btnPop_onclick()"/>
        </div>
    </body>
    </html>
  • 相关阅读:
    luogu4182 [USACO18JAN] Lifeguards P (单调队列优化dp)
    bzoj3277 串 (后缀数组+二分答案+ST表)
    [模板]后缀数组
    bzoj4361 isn (dp+树状数组+容斥)
    luogu4187 [USACO18JAN]Stamp Painting (dp)
    [USACO15DEC]高低卡(白金)High Card Low Card (Platinum)
    USACO环绕岛屿Surround the Islands 并查集 枚举暴力
    5.7 ~ 5.12 刷题列表
    5.4 ~ 5.6 刷题记录
    HNOI2012 永无乡 无旋Treap
  • 原文地址:https://www.cnblogs.com/xyyt/p/3477184.html
Copyright © 2011-2022 走看看