使用jQuery的弹出窗口控件

分享于 

8分钟阅读

Web开发

  繁體

介绍

今天,我将展示一个令人惊叹的弹出窗口控件,。 我以为互联网上有很多这样的控制,但是我需要创建我自己的控制。

背景

这个弹出控件非常简单,只需要在HTML页面顶部包含jQuery库(。12,3 x ) 和我们的jQuery弹出库文件 braviPopUp.js,以及一些jQuery代码。

这个弹出控件是一个浮动窗口,它包含一个标题栏和一个弹出页面的内容区域。 默认情况下,可以使用'x'icon 移动。调整大小和关闭对话框窗口。

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

braviPopUp.js 中定义的braviPopUp 方法需要4 个 perameters

  • 页面标题
  • 源 URL
  • 宽度
  • 高度
显示弹出页面内容有一个 Iframe inside,浮动div用于显示弹出控件。 这里div在页面的Body 中附加了一些 css 设置,以便它可以居中。

使用代码

braviPopUp.js 中定义的方法名为 braviPopUp,它接受4 个参数 titleurlwidthheight。 我用标题栏。关闭按钮。内容区iFrame创建了原始的html containg。 调用 braviPopUp 方法时,它将把这个html附加到页面 body 中,并使用一些css设置使控件中的控件居中。

的jQuery代码:

(function ($) {
 $.braviPopUp = function (title, src, width, height) {
 //Destroy if exist $('#dv_move').remove();
 //create hte popup htmlvar 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 () {
 returnfalse;
 });
 $("#title_left").mousedown(function () {
 returnfalse;
 });
 $("#img_close").mousedown(function () {
 returnfalse;
 });
 //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); 

禁用的后台::

当弹出窗口打开时,禁用父页面以便不能执行任何操作都是很好的做法。 我添加了一个带有透明 background的overlay div,整个页面将覆盖它。 我们有这个的css

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

控制方法的收盘价为 :

若要从poup页调用close方法,请使用 parent.CloseDialog();

//close popupfunction 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,以便它将完全销毁。

将控件附加到页面 body css 之后,这是该控件的非常重要的部分。 所有 div<code>,span的位置和外观都由 css 管理。 也有像标题栏图像,关闭按钮 icon 等图像

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方法i 按钮点击事件并调用弹出窗口。

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script><linkrel="stylesheet"type="text/css"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/><scriptsrc="jquery/braviPopup.js"type="text/javascript"></script><linkhref="css/braviStyle.css"rel="stylesheet"type="text/css"/><title>braviPopUp</title><scripttype="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><formid="form1"runat="server"><inputtype="button"id="btnTest"value="Click Me!"/></form></body></html>

屏幕截图

历史记录

这是我早期发布 jQuery警报控件的一个想法。 现在它已经成为一个弹出窗口控件。


Window  控制  POP  弹出  STUN  
相关文章