• 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>
  • 相关阅读:
    AJAX 弹出窗消息类
    正则表达式验证总结
    Coolite 三列布局演示
    Coolite: Button、TextField、DataField、ComBox
    页面返回
    Coolite GridPanel 操作之一:获取gridpanel 选中行的记录信息
    页面上Enter 键禁用
    new、abstract、virtual、override,sealed关键字区别和使用代码示例
    Coolite TreePanel 操作之一:TreePanel 刷新
    调用WCF出现 The remote server returned an error: (401) Unauthorized. 错误
  • 原文地址:https://www.cnblogs.com/dataadapter/p/2578496.html
Copyright © 2020-2023  润新知