asp.net中弹出层效果(div,不可拖拉)

引用文件:<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>

                      <link href="css/style.css" rel="stylesheet" type="text/css" />

style.css文件:    .outdiv{position: absolute;display: none;text-align: center;z-index:100; padding: 5px;min-width:400px;max-width:650px;}
                            /* left: 230px;top:50px;*/
                            .outdiv .cnt{ position: relative; z-index: 10; background-color: #fff; border: 1px #000 solid;}
                            .outdiv .cnt .title1{ height: 30px; line-height: 30px; background-color: #f7f7f7; padding-left: 1em; font-size: 14px;color:#000000;font-size:15px; font-weight:bold;}
                             .outdiv .close{ display: block; z-index: 10; background: url(../Images/close.png) no-repeat; width: 17px; height: 16px; top: 0px; right: 0px; position: absolute;}
                             .outdiv .close1{ display: block; z-index: 10; background: url(../Images/close1.png) no-repeat; width: 20px; height: 20px; top: 0px; right: 0px; position: absolute;}
                            .outdiv .cnt .tip-mainBox{ min-height:300px;text-align:center;max-height:350px;overflow:auto;vertical-align:middle;}
                             .outdiv .tip-mainBox table{margin:0 auto}
                             .title1{background:url(../Images/bj_t.png) repeat-x; border:0px;}
                         .outdiv .action{ padding-top: 15px; height: 50px; background-color: #f6f6f6;}
                          . outdiv .bg1{ width: 100%; height: 100%; z-index: 1; opacity: 0.8; background-color: #333; filter:alpha(opacity=80); position: absolute; top: 0; left: 0;}
                        .outdiv table td{text-align:left;}(样式中的图片没有文件)

弹出的层:   <div id="div_title" class="outdiv" style="width: 610px;">
                         <div class="bg1">
                          </div>
                         <div class="cnt">
                         <a href="javascript:void(0);" οnclick="hideOverlay();$('#tijiao').css('display','none');" class="close"></a>
                         <div class="title1">
                        <span id="title_span"></span>
                         </div>
                         <div class="tip-mainBox" style="height:350px;">
                         <br />
                         <span id="ClassDetail_Span" style="text-align:left"></span>
                         <br />
                       </div>
                      </div>
                       </div>

js代码:<script type="text/javascript">
                //遮罩效果
                $("#div_title").overlay({
                    mask: {
                        color: '#000',
                        loadSpeed: 200,
                        opacity: 0.5
                    },
                    closeOnClick: false,
                    onBeforeClose: function () {
                        // $('#pluginin').html("");
                    }


                });


                //显示遮罩层
                function showOverlay(v) {


                    // $("#info").css('display', 'block');
                    //对话框位置控制
                    var oHeight = window.document.body.offsetHeight;
                    var oWidth = window.document.body.offsetWidth;
                    var oTop = (oHeight - $("#div_title").height()) / 2;
                    var oLeft = (oWidth - $("#div_title").width()) / 2;
                    $("#div_title").css({ "top": oTop + "px", "left": oLeft + "px" });


                    $("#div_title").overlay().load();             //显示遮罩对话框
            }
                //隐藏遮罩层
                function hideOverlay() {
                    // IsSubmitChecked == true;                        //重置
                    $('#div_title').overlay().close();                //隐藏提示框
                }
    </script>


调用:<a href="javascript:void(0);" value="1" οnclick="showOverlay(this.value);">弹出层</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值