zoukankan      html  css  js  c++  java
  • jquery dialog——弹出框1

    在做一个系统时,很多时候需要把一个页面弹出来,让用户做选择一些选择或者页面太小也可以以弹出框的形式来做。但是又不想用浏览器自带的弹出框,这时我们需要自己做一个。下面我们就做一个最简单的弹出框,即有一个阴影遮盖层,然后做一个居中显示的层,最后在居中的层中加一个iframe即可,一个弹出层就做好了。

     示例

    CSS代码

    View Code
    html, body
    {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .dFilter
    {
        position: absolute;
         100%;
        height: 100%;
        z-index: 999;
        background-color:Gray;
        left: 0px;
        top: 0px;
    }
    .dBody
    {
        position: absolute;
        z-index: 1000;
        border: 2px solid #C4D9F6;
        background-color: white;
    }
    .dHeader
    {
        background-image: url(../img/bg_bar02.jpg);
        height: 20px;
         100%;
        line-height: 20px;
    }
    .dHeader label
    {
        color: Black;
        float: left;
        font-weight: bold;
        margin-left: 5px;
        line-height:20px;
    }
    .dHeader img
    {
        float: right;
        height:18px;
        18px;
        background-image: url(../img/close.png);
    }

    JS 代码

    View Code
    /*
        Create By:Mike.Jiang
        Create Date:2012-07-03
    */
    var Dialog = {
    
        RemoveDialog: function() {
            $("#dFilter").remove();
            $("#dBody").remove();
            Dialog.ShowSelect();
        }
    }
    $(function() {
        $.fn.extend({
            ShowDialog: function(options) {
                //插件内部函数
                var nFun = {
                    HideSelect: function() {
                        $("select").hide();
                    },
                    ShowSelect: function() {
                        $("select").show();
                    },
                    RemoveDialog: function() {
                        $("#dFilter").remove();
                        $("#dBody").remove();
                        nFun.ShowSelect();
                    },
                    CenterShow: function(dBody, width, height) {
                        var topPX = 0;
                        topPX = $(document.documentElement).height() - height;
                        if (topPX < 0) {
                            topPX = 0;
                        } else {
                            topPX = $(document.documentElement).scrollTop() + topPX / 2;
                        }
                        var leftX = $(document.documentElement).width() - width;
                        if (leftX < 0) {
                            leftX = 0;
                        } else {
                            leftX = $(document.documentElement).scrollLeft() + leftX / 2;
                        }
                        dBody.css({ "left": leftX + "px", "top": topPX + "px" });
                    }
                }
                var settings = {
                    height: 400, //弹出框的高度
                     400, //弹出框的宽度
                    title: "标题", // 弹出框的标题
                    src: "", //弹出框的页面URL
                    beforeShow: nFun.HideSelect, //在显示弹出框之前的方法
                    afterClose: nFun.ShowSelect //在关闭弹出框之后的方法
                };
                if (options) {
                    $.extend(settings, options);
                }
                nFun.RemoveDialog();
                settings.beforeShow();
                //背影遮盖(是否为模式窗口)
                var dFilter = $('<div id="dFilter" class="dFilter"></div>').appendTo(document.body);
                dFilter.css("opacity", "0.5");
                dFilter.css("height", $(document).height());
                dFilter.css("width", $(document).width());
                //弹出页面的主DIV
                var dBody = $('<div id="dBody" class="dBody"  ></div>').appendTo(document.body);
                var dBodyHeight = settings.height + 20;
                dBody.css({ "width": settings.width + "px", "height": dBodyHeight + "px" });
                //弹出页面的头部
                var dHeader = $('<div class="dHeader" ></div>').appendTo(dBody);
                //弹出页面的标题
                var dTitle = $('<label></label>').appendTo(dHeader);
                dTitle.text(settings.title);
                //弹出页面的关闭按钮
                var dClose = $('<img alt="" />').appendTo(dHeader);
                //弹出页面的内容容器iframe
                var dIframe = $('<iframe frameborder="0"  ></iframe>').appendTo(dBody);
                
                //设置弹出框的宽高
                var dIframeWidth = settings.width;
                dIframe.attr({ "width": dIframeWidth + "px", "height": settings.height + "px", "src": settings.src });
                
                //设置弹出框居中显示
                nFun.CenterShow(dBody, settings.width, settings.height);
                //关闭按钮事件
                dClose.click(function() {
                    nFun.RemoveDialog();
                    settings.afterClose();
                });
                $(window).resize(function() {
                    nFun.CenterShow(dBody, settings.width, settings.height);
                });
            }
        });
    });

    HTML代码

    View Code
        <script type="text/javascript">
            $(document).ready(function() {
                $("#btnPopup").click(function() {
                    $(window).ShowDialog({  800, height: 400, title: "博客园", src: "http://www.cnblogs.com" });
                });
            });
        </script>
  • 相关阅读:
    20200226 Java IO流——廖雪峰
    20200225 Java 多线程(2)-廖雪峰
    20200225 Java 多线程(1)-廖雪峰
    20200224 尚硅谷ElasticSearch【归档】
    20200224 一 概述
    20200222 尚硅谷Dubbo【归档】
    20200222 四、dubbo原理
    Improved robustness of reinforcement learning policies upon conversion to spiking neuronal network platforms applied to Atari Breakout game
    Reinforcement learning in populations of spiking neurons
    Solving the Distal Reward Problem through Linkage of STDP and Dopamine Signaling
  • 原文地址:https://www.cnblogs.com/dataadapter/p/2578496.html
Copyright © 2011-2022 走看看