两个页面弹出层的例子

1.       弹出层

Css：

/*弹出层样式*/

.MaskPanel {

background-color: #000;

position: absolute;

display: none;

left: 0px;

top: 0px;

opacity: 0.5;

filter: alpha(opacity=50);

z-index: 99;

}

.MaskContent {

position: fixed;

top: 40%;

left: 50%;

margin-top: -50px;

margin-left: -140px;

display: none;

z-index: 100;

}

.masksection {

background: none repeat scroll 0 0 #333333;

border: 1px solid #333333;

border-radius: 5px 5px 5px 5px;

margin: 10% auto;

padding: 10px;

width: 240px;

}

.b-Tel {

color: #FFFFFF;

font-family: 微软雅黑;

font-size: 18px;

margin-bottom: 5px;

}

.b-Telb {

margin-bottom: 10px;

}

.M-sure {

width: 100%;

margin: 0 auto;

}

.inputFour {

background: none repeat scroll 0 0 #3C3C3C;

border: 1px solid #111111;

border-radius: 4px 4px 4px 4px;

box-shadow: 0 1px 0 #666666 inset, 0 1px 0#333333;

color: #FFFFFF;

cursor: pointer;

font-family: 微软雅黑;

font-size: 14px;

height: 35px;

padding: 0;

text-align: center;

width: 125px;

}

Html：

<divclass="MaskPanel"></div>

<divclass="MaskContent" style="margin-left: -131px;">

    <sectionclass="masksection">

        <p class="b-Tel"style="text-align: center;"></p>

        <div class="M-sure"style="text-align: center;">

            <inputοnclick="closeMask();" type="button"class="inputFour" value="我知道了"style="display: none;" />

        </div>

    </section>

</div>

<divid="LoadingDiv" class="LoadingStyle">

    <img class="LoadingStyle"alt="" src="@MIO2OConfig.PublicResourceAddress/Images/Loading.gif">

</div>

Js：

var needDir;

functionshowWaitingMask(errorMsg, needDire) {

        var panel = $(".MaskPanel");

        var content =$(".MaskContent");

        if (errorMsg) {

           content.find("P").text(errorMsg);

           content.find("input[type=button]").show();

        } else {

           content.find("input[type=button]").hide();

        }

        needDir = needDire;

        panel.css("height",document.body.scrollHeight);

        panel.css("width", document.body.scrollWidth);

        panel.show();

        content.show();

    }

 

    function closeMask() {

        $(".MaskPanel").hide();

        $(".MaskContent").hide();

        @*if (needDir == "1") {

            if('@ViewData["Category"]' == "Tour") {

                window.location ='@Url.Action("Index", "OrderListForTour")';

            }

            else {

                var paras1 ="?Category=" + '@ViewData["Category"]';

                window.location ='@Url.Action("Index", "OrderList")' + paras1;

            }

        }*@

    }

2.      弹出层2

Css: #allin { top: 0; }

Html：<divid="allin"></div>

js：

function submit() {

        //var allin = $("#allin");

        //var titleDiv1 = $("#titleDiv1");

        //allin.css("height", window.innerHeight);

        //allin.css("width", document.body.scrollWidth);

        //allin.show();

        //titleDiv1.show();

       alert("OK");

    }