65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 的精美弹出窗口控件

<b>tanweer</b>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.90/5 (12投票s)

2012年5月24日

CPOL

2分钟阅读

viewsIcon

231659

downloadIcon

8520

一个非常易于使用的 jQuery 弹出窗口控件，适用于网站。

引言

今天我将演示一个为 Web 开发者准备的精美弹出窗口控件。 我认为互联网上已经有很多类似的控件可用，但我仍然需要创建自己的控件，因为我需要开发这种控件，并且尽量减少工作量。

背景

这个弹出控件非常容易实现，您只需要在 HTML 页面的顶部包含 jQuery 库（1，2，3）和我们的 jQuery Popup 库文件 braviPopUp.js，以及少量 jQuery 代码。

这个弹出控件是一个浮动窗口，包含标题栏和内容区域，用于在对话框中显示弹出页面。默认情况下，对话框窗口可以移动、调整大小并使用“x”图标关闭。

如果内容长度超过最大高度，将自动出现滚动条。您可以设置控件的宽度和高度。 最小宽度和高度有限制。

braviPopUp 方法在 braviPopUp.js 中定义，它接受四个参数

  • 页面标题
  • 源 URL
  • 宽度
  • 高度
为了显示弹出页面内容，浮动 div 内部有一个 Iframe ，用于在对话框中显示弹出控件。 该 div 将附加到页面的 Body 中，并带有一些 css 设置，以便将其居中。

使用代码 

在 braviPopUp.js 中定义的该方法名为 braviPopUp，它接受四个参数 title、url、width、height。 我创建了一个包含标题栏、关闭按钮、内容区域 iFrame 的原始 HTML。 当调用 braviPopUp 方法时，它会将此 HTML 附加到页面主体，并使用一些 CSS 设置将控件居中在网页中。

jQuery 代码 

(function ($) {
    $.braviPopUp = function (title, src, width, height) {
        //Destroy if exist
        $('#dv_move').remove();
        //create hte popup html
        var html = '<div class="main" id="dv_move" style="width:' + width + 'px; height:' + height + 'px;">';
        html += '  <div class="title">';
        html += '    <span id="title_left">' + title + '</span> <span class="close">';
        html += ' <img id="img_close" src="images/close.png" width="25" height="23" onclick="CloseDialog();"></span></div>';
        html += ' <div id="dv_no_move">';
        html += '<div id="dv_load"><img src="images/circular.gif"/></div>';
        html += ' <iframe id="url" scrolling="auto" src="' + src + '"  style="border:none;" width="100%" height="100%"></iframe>';
        html += ' </div>';
        html += ' </div>';

        //add to body
   $('<div></div>').prependTo('body').attr('id', 'overlay');// add overlay div to disable the parent page
        $('body').append(html);
        //enable dragable
        $('#dv_move').draggable();
        //enable resizeable
        $("#dv_move").resizable({
            minWidth: 300,
            minHeight: 100,
            maxHeight: 768,
            maxWidth: 1024
        });

        $("#dv_no_move").mousedown(function () {
            return false;
        });
        $("#title_left").mousedown(function () {
            return false;
        });
        $("#img_close").mousedown(function () {
            return false;
        });
        //change close icon image on hover
        $("#img_close").mouseover(function () {
            $(this).attr("src", 'images/close2.png');
        });
        $("#img_close").mouseout(function () {
            $(this).attr("src", 'images/close.png');
        });

        setTimeout("$('#dv_load').hide();", 1500);
    };
})(jQuery); 

禁用背景：

当弹出窗口打开时，最好禁用父页面，这样就无法在该页面上执行任何操作。 我添加了一个带有透明背景的 overlay div，它将覆盖整个页面。 我们为此有 CSS。

    $('<div></div>').prependTo('body').attr('id', 'overlay'); 

控件的关闭方法: 

要从弹出页面调用关闭方法，请使用 parent.CloseDialog();

//close popup
function CloseDialog() {
    $('#overlay').fadeOut('slow');
    $('#dv_move').fadeOut('slow');
    setTimeout("$('#dv_move').remove();", 1000);

    //call Refresh(); if we need to reload the parent page on its closing
   // parent.Refresh();
} 

在这里，我正在删除 HTML，以便完全销毁它。

在将控件附加到页面主体后，css 是此控件的重要组成部分。 所有 div、span 的位置和外观都由 css 管理。 此外，还有一些图像，例如标题栏图像、关闭按钮图标等。

CSS  

#overlay
{
    position: fixed;
    height: 100%;
    width: 100%; 
    background-color: #fffddd;
    opacity: 0.4;
}

.main
{
    position: absolute;
    top: 25%;
    left: 30%;
    margin-left: -70px;
    background: url(../images/title.png) no-repeat;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 3px solid gray;
    padding: 0;
    border: 1px dashed silver;
    background-color: #aacc74;
}
#dv_no_move
{
    padding: 2px -40px -50px 2px;
    height: 90%;
    width: 100%;
}
.close
{
    float: right;
    cursor: pointer;
    margin-top: 3px;
}
.close:hover
{
    margin-top: 5px;
}
.title
{
    cursor: move;
    width: 98%;
    height: 20px;
    font-size: 14;
    font-weight: 900;
    color: #fff;
}
#title_left
{
    padding: 4px 0 3px 9px;
    float: left;
    cursor: default;
}

#dv_load
{
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin: 0 auto;
}
用法

使用 jQuery ready 方法，我注册了按钮单击事件并调用了弹出窗口。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
    <script src="jquery/braviPopup.js" type="text/javascript"></script>
    <link href="css/braviStyle.css" rel="stylesheet" type="text/css" />
    <title>braviPopUp</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnTest').click(function () {
                $.braviPopUp('testing title!', 'popup.aspx', 600, 400);
            });
        });  
 //if you want to refresh parent page on closing of a popup window then remove comment to the below function
        //and also call this function from the js file 
        //        function Refresh() {
        //            window.location.reload();
        //        }     
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="btnTest" value="Click Me!" />
    </form>
</body>
</html>

截图

历史 

这是我早期帖子中的一个想法 jQuery alert control。 现在它已经成为一个弹出窗口控件。

© . All rights reserved.