自定义弹出层

最新推荐文章于 2021-11-30 13:45:03 发布

子墨爸爸

最新推荐文章于 2021-11-30 13:45:03 发布

阅读量524

点赞数 1

分类专栏： Css 文章标签： html 弹出层

本文链接：https://blog.csdn.net/wupd2014/article/details/49666495

版权

Css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网上有很多弹出层，大多数是jquery插件，那么如何手动写一个属于自己的弹出层呢？
弹出层示例
1、首先说一些弹出层需要的Html
弹出层大多数分为3个部分，Header+body+footer,获得Header+body，
如
：这里写图片描述
因此，其Html结构可以大致如下：

            <div id='pop_div' class="pop_box">
            <div class="p_head">
                <div class="p_h_title">头部提示信息>></div>
                <!--X代表关闭弹出层的按钮或图标-->
                <div><a class="p_h_x" onclick="hideDiv('pop_div');" title="关闭窗口">X</a></div>
            </div>
            <div class="p_box_body" id="p_b_body" runat="server">
                <!--弹出层body部分-->
            </div>
        </div>

2、对其中的一些div添加样式

  .pop_box {
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
            display: none;
            position: absolute;
        }
        .p_box_body {
            clear: both;
            padding: 5px 5px 5px 5px;
            height: 100%;
        }
        .p_head {
            height: 100px;
            background: url('../Scripts/sigma_grid/skin/default/images/dialog_close_btn.gif') repeat-x center;
            cursor: move;
        }
        .p_h_title {
            float: left;
            height: 100px;
            line-height: 100px;
            width: 60px;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            text-indent: 10px;
        }
        .p_h_x {
            float: right;
            text-align: center;
            height: 300px;
            width: 600px;
            line-height: 100px;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

相应的Js

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