几种样式的弹窗示例

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

示例代码：

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

 

 

posted on 2013-12-16 17:58  逍遥云天  阅读(5412)  评论(0)  编辑  收藏  举报

导航