Jquery模态框

发布于 2017-08-31  242 次阅读


本来模态框时就想用bootstrap的模态框,但是这个框架里的jquery版本是1.8,这个版本的boostrap要求jquery 1.9.1+,于是就只用jquery来实现了。

<script type="text/javascript">
 function PopupDiv(div_id) {
 // 获取传入的DIV 
 var $div_obj = $("#" + div_id);
 // 计算机屏幕高度 
 var windowWidth = $(window).width();
 // 计算机屏幕长度 
 var windowHeight = $(window).height();
 // 取得传入DIV的高度 
 var popupHeight = $div_obj.height();
 // 取得传入DIV的长度 
 var popupWidth = $div_obj.width();

 // // 添加并显示遮罩层 
 $("<div id='bg'></div>").width(windowWidth * 0.99)
 .height(windowHeight * 0.99).click(function () {
 //hideDiv(div_id); 
 }).appendTo("body").fadeIn(200);

 // 显示弹出的DIV 
 $div_obj.css({
 "position": "absloute"
 }).animate({
 left: windowWidth / 2 - popupWidth / 2,
 top: windowHeight / 2 - popupHeight,
 opacity: "show"
 }, "slow");

 }
 //隐藏弹出DIV
 function HideDiv(div_id) {
 $("#bg").remove();
 $("#" + div_id).animate({
 left: 0,
 top: 0,
 opacity: "hide"
 }, "slow");
 }
 //调用方法
 function CreateAccount() {
 PopupDiv("createAccount");
 }
 </script>
  <style type="text/css">
 .pop-box {
 /*弹出窗口后,弹出的DIV采用此CSS,保证置于最上层
 z-index控制Z轴的坐标,数值越大,离用户越近
 */
 z-index: 9999999; /*这个数值要足够大,才能够显示在最上层*/
 margin-bottom: 3px;
 display: none;
 position: absolute;
 background: white;
 border-radius: 11px;
 border: 1px solid #6e8bde;
 }

 #bg {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 /*弹出窗口后,添加遮罩层,采用此CSS,将该层置于弹出DIV和页面层之间
 z-index控制Z轴的坐标,数值越大,离用户越近 rgba(72, 74, 68, 0.46)
 */
 z-index: 1001;
 background-color: #8f9f8f;
 -moz-opacity: 0.7;
 opacity: .70;
 filter: alpha(opacity = 70);
 }
 </style>
 <div class="pop-box" id="createAccount" style="width: 300px; height: 330px;">
 <div class="form-horizontal" style="margin-top: 15px;">
 <div class="form-group">
 <label class="control-label col-md-3">姓名</label>
 <div class="col-md-8">
 <asp:TextBox ID="txtPersonName" runat="server" CssClass="form-control" placeholder="请输入姓名">></asp:TextBox>
 </div>
 </div>
 <div class="form-group">
 <label class="control-label col-md-3">部门</label>
 <div class="col-md-8">
 <asp:TextBox ID="txtDepartment" runat="server" CssClass="form-control" placeholder="请输入部门">></asp:TextBox>
 </div>
 </div>
 <div class="form-group">
 <label class="control-label col-md-3">职务</label>
 <div class="col-md-8">
 <asp:TextBox ID="txtDuty" runat="server" CssClass="form-control" placeholder="请输入职务">></asp:TextBox>
 </div>
 </div>
 <div class="form-group">
 <asp:Button ID="btnCreate" runat="server" Text="创建" CssClass="btn btn-primar col-md-offset-4" OnClick="btnCreate_Click" />
 <a href="#" onclick="HideDiv('createAccount')" class="btn btn-danger">关闭</a>
 </div>
 </div>
 </div>

LoneKing