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);
　　　　}