html里面自定義彈出窗口

　　網頁上默認的提示框或對話框一般比較丑，可以利用div遮蓋層來自定義對話框

　　1.定義一個按鈕或者鏈接（項目里面是通過點擊一個圖片）

　　　　<img src="images/zz.gif" style="margin-top:16%" onclick="myalert('描述（限200字）：')"/>

　　2.設置隱藏的遮罩層　

　　　　<div id="divResult"></div><div id="bg"></div>
　　　　<div class="box" style="display: none">
　　　　　　<div class="title">標題</div>
　　　　　　<div class="list2">
　　　　　　　　<p></p>
　　　　　　</div>
　　　　　　<div>
　　　　　　　　<textarea id="remark" style="width:80%;margin-left:5%"></textarea>
　　　　　　</div>
　　　　　　<div class="end">
　　　　　　　　<center>
　　　　　　　　　　<a id="btnZhuanhui" href="#" class="close" style="color:#000000; font-size:16px; margin-right:5%">確定</a>
　　　　　　　　　　<a id="btnCloseHref" href="#" class="close" style="color:#000000; font-size:16px; margin-left:5%">取消</a>
　　　　　　　　</center>
　　　　　　</div>
　　　　</div>

　　3.用css設定自己的通用樣式

　　　　.box
　　　　　　{
　　　　　　　　position: absolute;
　　　　　　　　width: 250px;
　　　　　　　　left: 50%;
　　　　　　　　height: auto;
　　　　　　　　z-index: 100;
　　　　　　　　background-color: #fff;
　　　　　　　　border: 1px solid rgb(0,153,153);
　　　　　　　　/*padding: 1px;*/
　　　　　　　}

　　　　　　.box div.title
　　　　　　{
　　　　　　　　height: 35px;
　　　　　　　　font-size: 16px;
　　　　　　　　background-color: #099;
　　　　　　　　position: relative;
　　　　　　　　padding-left: 10px;
　　　　　　　　line-height: 35px;
　　　　　　　　color: #fff;
　　　　　　}

　　　　　　.box div.title a
　　　　　　{
　　　　　　　　position: absolute;
　　　　　　　　right: 5px;
　　　　　　　　font-size: 16px;
　　　　　　　　color: #fff;
　　　　　　}

　　　　　　.box div.list
　　　　　　{
　　　　　　　　min-height:60px;
　　　　　　　　padding: 10px;
　　　　　　}

　　　　　　.box div.list p
　　　　　　{
　　　　　　　　height: 24px;
　　　　　　　　line-height: 60px;
　　　　　　　　font-size:14px;
　　　　　　}

　　　　　　.box div.end
　　　　　　{
　　　　　　　　min-height:30px;
　　　　　　　　padding: 5px;
　　　　　　}

　　　　#bg
　　　　{
　　　　　　background-color: #666;
　　　　　　position: absolute;
　　　　　　z-index: 99;
　　　　　　left: 0;
　　　　　　top: 0;
　　　　　　display: none;
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　opacity: 0.5;
　　　　　　filter: alpha(opacity=50);
　　　　　　-moz-opacity: 0.5;
　　　　　　}

　　4.編寫myalert

　　　　function myalert(msg) {

　　　　　　$("#bg").css({
　　　　　　display: "block", //height:$(document).height()
　　　　　　height: "100%",
　　　　　　position: "fixed"
　　　　　　});
　　　　　　var $box = $('.box');
　　　　　　$box.css({
　　　　　　//設置彈出層距離左邊的位置
　　　　　　left: ($("body").width() - $box.width()) / 2 + "px",
　　　　　　//設置彈出層距離上面的位置
　　　　　　top: ($(window).height() - $box.height()) / 2 - $(window).scrollTop() - $box.height() + "px",
　　　　　　display: "block"
　　　　　　}).find("p").html(msg);
　　　　}