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'>&nbsp;</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>
    <onclick="ShowDiv()">Close</a>
    <br />
    <div id="dail" style="height: 300px; width: 500px; opacity: 0.5; border: solid 10px #999999;
        display: none;"
>
        &nbsp;
    </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  阅读(2740)  评论(0编辑  收藏