jquery弹出层-优化－透明边框

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DailogTest.aspx.cs" Inherits="WebDailog.DailogTest" %>

<!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 runat="server">
    <title>Dailog</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        function HideDiv() {
            $("#dail").hide(); $("#dail2").hide();
            $("#lean_overlay").fadeOut(200);
        }
        function ShowDiv() {
            var sig = $("#dail").outerWidth();
            /*加入遮罩层到Body*/
            var _3 = $("<div id='lean_overlay'> </div>");
            $("body").append(_3);
             /*边框DIV*/　
            $("#dail").css(
                 {
                     "display": "block",
                     "position": "fixed",
                     "opacity": 0,
                     "z-index": 11000,
                     "left": 50 + "%",
                     "margin-left": -(sig / 2) - 10 + "px",
                     "top": 180 - 10 + "px",
                     "padding": "5px 0px 0px 0px",

                 });
                 /*最上层DIV*/
            $("#dail2").css(
                 {
                     "display": "block",
                     "position": "fixed",
                     "opacity": 0,
                     "z-index": 11001,
                     "left": 50 + "%",
                     "margin-left": -(sig / 2) + "px",
                     "top": "180" + "px",
                     "padding": "5px 0px 0px 0px",

                 });

            /*边框DIV 透明到0.5*/　
            $("#dail").fadeTo(200, 0.5);
                 /*最上层DIV 不透明*/
            $("#dail2").fadeTo(100, 1);
            /*遮罩层透明到0.1*/
            $("#lean_overlay").fadeTo(200, 0.1);


            $("#lean_overlay").click(HideDiv);
            $("#lean_overlay").show();

        }
    </script>
    <style type="text/css">
        /*遮罩层　透明度0.1*/
        #lean_overlay
        {
            position: fixed;
            z-index: 10000;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: blue;
            display: none;
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <a onclick="ShowDiv()">Close</a>
    <br />
    <div id="dail" style="height: 300px; width: 500px; opacity: 0.5; border: solid 10px #999999;
        display: none;">
         
    </div>
    <div id="dail2" style="height: 300px; width: 500px; background-color: #FFCC00; opacity: 1;
        display: none;">
        <span style="width: 455px; float: left;">详细信息</span><span onclick="HideDiv()">Close</span>
    </div>
    </form>
</body>
</html>

基于Jquery的弹出框，原创（King）

posted @ 2012-05-10 00:48 cn_king 阅读(2900) 评论(0) 编辑收藏举报

刷新页面返回顶部

kinz

jquery弹出层-优化－透明边框

公告