jquery+div 弹出层效果

最新推荐文章于 2020-07-16 16:29:33 发布

nuptsv_ice

最新推荐文章于 2020-07-16 16:29:33 发布

阅读量812

点赞数

分类专栏： javascript

javascript 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jquery+div 弹出层(窗口) div 可拖拽移动位置</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://fromvega.com/code/easydrag/jquery.easydrag.handler.beta2.js"></script>
    <style type="text/css">       
        .pop_box{z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/ display: none;position: absolute;background: #FFF;border: 1px solid #373737;}        
        .p_box_body{clear: both;padding: 5px 5px 5px 5px; height:100%;}
        .p_head{ height:30px; background:url(dlg_bg.jpg) repeat-x center;cursor:move; }
        .p_h_title{float: left;height: 30px; line-height:30px;width:300px; font-size:12px;font-weight: bold; color:#fff; text-indent:10px;}
        .p_h_x{float: right; text-align:center; height: 30px; width:30px;line-height:30px;color: #fff;font-size: 12px;font-weight: bold; cursor:pointer;}       
    </style>
    <script language="javascript" type="text/javascript">       
        function popupDiv(div_id) {
            var div_obj = $("#" + div_id);
            //窗口宽度,高度
            var winWidth = $(window).width();
            var winHeight = $(window).height();
            //弹出的div的宽度,高度
            var popHeight = div_obj.height();
            var popWidth = div_obj.width();
            div_obj.animate({ opacity: "show", left: (winWidth-popWidth) / 2, top: (winHeight-popHeight)/2,width:popWidth,height:popHeight}, 300);          
        }        
        function hideDiv(div_id) {
            $("#" + div_id).animate({opacity: "hide" }, 300);
        }
      $(function() {
            $(".pop_box").easydrag();
            $(".pop_box").setHandler(".pop_box .p_head");
         });
    </script>

</head>
<body>
    <div id='pop_div' class="pop_box">
        <div class="p_head"><div class="p_h_title">选择专业>></div><div><a class="p_h_x" οnclick="hideDiv('pop_div');" title="关闭窗口">X</a></div></div>
        <div class="p_box_body" id="p_b_body" runat="server"></div>
    </div>
    <a οnclick="popupDiv('pop_div');" style="cursor:pointer;">选择专业>></a>    
</body>
</html>

nuptsv_ice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+div 弹出层效果

jquery+div 弹出层(窗口) div 可拖拽移动位置 .pop_box{z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/ display: none;position: absolute;background: #FFF;border: 1px solid #373737;}
复制链接

扫一扫

专栏目录