hmtl弹出框样式

@model Web.Manager.Models.SendMessage

@{
ViewBag.Title = "消息发布";
Layout = null;
}

<link href="@Url.Content("~/Styles/Layout/style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Styles/Layout/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Styles/SendMessage.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.1.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>

<style type="text/css">
body {
font-size: 12px;
font-family:Arial 'Microsoft YaHei';
}

ul li {
list-style-type: none;
}

dl {
padding: 2px;
}

dd {
position: absolute;
margin-left: 100px;
height: 23px;
}

dt {
position: absolute;
font-weight: normal;
height: 23px;
}

.divMainContent {
text-align: center;
height: 32px;
font-size: 12px;
}

.btnRole {
margin-left: 68px;
margin-top:-8px;
min-width: 160px;
max-width: 160px;
}

.btnSearch {
margin-left: 6px;
margin-top:-8px;
width: 60px;
}
input {
font-size: 12px;
font-family:Arial 'Microsoft YaHei';
}
.divDalog{
margin-left:380px;
margin-top:120px;
position:absolute;
height:300px;
width:400px;
border:1px solid #CCC;
background:#ffffff;
display:none;
}
.closeCss{
text-align:right;
}
.divDalogContent{
margin:2px;
}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 12px;
border: 1px solid #0409ff;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>

<script type="text/javascript">
function CloseDiv() {
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function ShowDiv(data) {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
$.ajax({
url: "/Message/SendMessageDialog?dataType=" + data,
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "html",
success: function (result) {
var closeHtml = "<div class='closeCss'><a href='javascript:void(0)' onclick='CloseDiv();'>关闭</a></div>";
var result = closeHtml + "<p><div class='divDalogContent'>" + result + "</div></p>";
$("#light").html(result);
},
error: function () {
}
});
}
</script>

<div style="width:600px;height:620px;margin:6px 0px 6px 300px;border:1px solid #CCC;border-style:dashed; position:absolute;">
@using (Html.BeginForm("SendMessage", "Message", FormMethod.Post, new { id = "FromSend" }))
{
<p style="font-weight:600;">当前位置:消息发布</p>
<dl>
<dt>消息类型:</dt>
<dd>
<select id="Select1">
<option></option>
</select>
</dd>
</dl>
<dl>
<dt>账号关键字:</dt>
<dd>
<input type="text" style="width:120px;" />
<input type="button" class="btnRole" onclick="javascript:ShowDiv('PartialPageSelectRole');" value="选择角色" />
<input type="button" class="btnSearch" value="搜索" />
</dd>
</dl>
<div style="padding-top:20px;position:absolute;">
<div style="height:200px;width:200px;border:1px solid #CCC;">
<ul>
<li><input id=" checkbox1" type="checkbox" />全选</li>
<li><input id="Checkbox1" type="checkbox" />1111111</li>
<li><input id="Checkbox1" type="checkbox" />2222222</li>
</ul>
</div>
<div style="width:200px;">
<span style="text-align:right">共<span style="color:red;">10</span>条记录</span>
</div>
</div>
<div style="padding-top:20px;margin-left:196px;height:200px; position:absolute;">
<ul>
<li><input type="button" style="margin-top:60px;width:60px;height:21px;" value=">>" /></li>
<li><input type="button" style="margin-top:30px;width:60px;height:21px;" value="<<" /></li>
</ul>
</div>
<div style="padding-top:20px;margin-left:300px; position:absolute;">
<div style="height:200px;width:200px;border:1px solid #CCC;">
<ul>
<li><input id=" checkbox1" type="checkbox" />全选</li>
<li><input id="Checkbox1" type="checkbox" />1111111</li>
<li><input id="Checkbox1" type="checkbox" />2222222</li>
</ul>
</div>
<div style="width:200px;">
<span style="text-align:right">共<span style="color:red;">10</span>条记录</span>
</div>
</div>
<div style="margin-top:280px;">
<dl>
<dt>消息主题:</dt>
<dd>
<input type="text" />
<input type="button" onclick="javascript:ShowDiv('PartialPageSelecProduct');"
style="margin-top:-12px;margin-left:32px;min-width: 160px;max-width: 160px;" value="选择产品" />
</dd>
</dl>
<dl>
<dt>消息内容:</dt>
<dd>
<textarea style="height:190px;width:402px;"></textarea>
</dd>
</dl>
<dl style="margin-top:196px;margin-left:100px;">
<dt><input type="button" value="确定" /></dt>
<dd><input type="button" style="margin-left:-46px;" value="重置" /></dd>
</dl>
</div>
}
</div>
<div id="light" class="white_content">
</div>
<div id="fade" class="black_overlay"></div>