jQuery通用对话框

最新推荐文章于 2020-11-25 16:29:16 发布
最新推荐文章于 2020-11-25 16:29:16 发布
阅读量667 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w93223010/article/details/8485604
版权

先上代码，在LinPanxing大神的基础上修改而成

Popup.js

// jQuery Dialogs Plugin
// Version 1.1
// Cory S.N. LaViska 
// Edit by LinPanxing 
// Modify by SiNiao

(function($) {
    $.popup = {
        ID: null,
        title: "",
        top: 0,
        left: 0,
        width: 0,
        height: 0,
        popType: "",
        repositionOnResize: false,          // 窗口调整大小后是否重新定位
        okButton: '确 定',                  // 确定按钮
        cancelButton: '取 消',              // 取消按钮
        isButtonRow: false,                 // 是否显示按钮
        isOverlay:null,												// 是否显示遮罩
        isPopup: false,                     // 是否为popup窗口
        autoClose: 0,                       // 窗口自动关闭 (大于0时窗口自动关闭)      
 
        prompt: function(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup) {       	        		   		        	        		   		
            this.ID = 'prompt';
            //如果已有对话框则终止
            if ($("#_Popup_" + this.ID).length > 0) {            	
							return;
            }
            this.title = title;
            this.popType = 'prompt';
            this.isButtonRow = isButtonRow;
            this.autoClose=autoClose;   
            if(isOverlay==false) {
            	this.isOverlay=false; 
            } else {
            	this.isOverlay=true; 
            }                       
            
            this.top=top;      
                           
            this.isPopup = isPopup || this.isPopup;          
            this.width = width || 300;
            this.height = height || 120;
            $.popup._show(msg, function(result) {
                if (callback) {  	
                	callback(result);
                }
            });
        },

        // 私有方法
        _show: function(msg, callback) {        	        	
            if ($("#_Popup_" + this.ID).length < 1) {            	                      	                
                var html =
			    '<div class="popup_' + this.popType + '" id="_Popup_' + this.ID + '" style="width:' + this.width + 'px">\
                  <div class="popup_header"><table style="width:'+(this.width-10)+'px" id="_Title_"><tr><td><h1>' + this.title + '</h1></td>\
                  <td align="right"><span id="_CloseButton_' + this.ID + '" class="prompt_button">×<span></td></tr></table></div>\
                  <div class="popup_content">\
                    <div id="_Container_' + this.ID + (this.height == 0 ? '">' : '" style="height:' + this.height + 'px">') + msg + '</div></div>' +
                    '<div class="buttonRow" id="_ButtonRow_' + this.ID + '"></div>' +
                  '<div class="popup_bottom"><div class="b_r"></div>\
                </div>';                    
                                 
                $("BODY").append(html); //填充                                                

                // IE6 Fix
                //var pos = ($.browser.msie && parseInt($.browser.version) <= 6) ? 'absolute' : 'fixed';

                $("#_Popup_" + this.ID).css({
                    position: 'absolute',
                    zIndex: 100,
                    padding: 0,
                    margin: 0,
                    minWidth: $("#_Popup_" + this.ID).outerWidth(),
                    maxWidth: $("#_Popup_" + this.ID).outerWidth()
                });
                //zIndex 属性设置元素的堆叠顺序，仅能在定位元素上奏效（例如 position:absolute;）																           

                $.popup._reposition(); //定位
                $.popup._maintainPosition(true); //位置随窗口大小改变   
                //关闭按钮事件                 
                $("#_CloseButton_" + this.ID).click(function() {                          		                         
                            $.popup._hide();
                });                
                $.popup._bindType(callback);		                               
                
                //增加遮罩                
                if(this.isOverlay) {
                	$("BODY").append('<div id="_overlay" class="overlay"></div>');			
		                $("#_overlay").css({
		                    width:$(document).width(),
		                    height:$(document).height()
		                });
                }											
								
                // Popup 窗口方法待测试
                if (this.isPopup) {                    
                    $("#_Popup_" + this.ID).click(function(e) {                    		
                        e ? e.stopPropagation() : event.cancelBubble = true;
                    });
                    $(document).click(function() {
                        $.popup._hide();
                    });
                }

                if (this.autoClose > 0) {
                    $.popup._autoClose();
                }
            }
            else {                        	            		
                $("#_Container_" + this.ID).html(msg);
                $.popup._bindType(callback);
                $.popup._reposition();
                $.popup._maintainPosition(true);
                $("#_Popup_" + this.ID).show();
                if (this.autoClose > 0) {
                    $.popup._autoClose();
                }
            }
        },

        _bindType: function(callback) {              		      		 	
            switch (this.popType) {
                case 'prompt':                           		
                		if (this.isButtonRow==1) {
                			//添加按钮                        				
                        $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" value="true"/>\
                        <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>');                   
                        var id=this.ID;
                        $("#_ButtonOK_" + this.ID)[0].focus();
                        $("#_ButtonOK_" + this.ID).click(function() {                          		
                            var val = $("#hid_" + id).val();                            
                            $.popup._hide();
                        });
                                                                        
                        $("#_Popup_" + id).keypress(function(e) {                        		                        	  
                            if (e.keyCode == 13) $("#_ButtonOK_" + id).trigger('click');    
                            else if (e.keyCode == 27) $("#_ButtonOK_" + id).trigger('click');                          
                        });  
                		}   
                    else if (this.isButtonRow==2) {                    	                  	
                    	  //添加按钮                    	     
                        $("#_ButtonRow_" + this.ID).html('<input type="hidden" id="hid_' + this.ID + '" value="true"/>\
                        <input type="button" value="' + $.popup.okButton + '" id="_ButtonOK_' + this.ID + '"/>\
                        <input type="button" value="' + $.popup.cancelButton + '" id="_ButtonCancel_' + this.ID + '"/>');                         
                        var id=this.ID;
                        $("#_ButtonOK_" + this.ID)[0].focus();
                        $("#_ButtonOK_" + this.ID).click(function() {                          		
                            var val = $("#hid_" + id).val();                            
                            $.popup._hide();
                            if (callback) callback(val);
                        });
                        $("#_ButtonCancel_" + this.ID).click(function() {
                            $.popup._hide();
                            if (callback) callback(false);
                        });                                                
                        
                        $("#_Popup_" + id).keypress(function(e) {                        		
                        	  //回车快捷键
                            if (e.keyCode == 13&&document.activeElement.id!=("_ButtonCancel_" + id)) $("#_ButtonOK_" + id).trigger('click'); 
                            //ESC快捷键
                            else if (e.keyCode == 27) $("#_ButtonCancel_" + id).trigger('click'); 
                        });                                                
                    }
                    break;
                default:
                    break;
            }

        },

        _hide: function() {        	        	
            if ($("#_Popup_" + this.ID).length > 0) {               		        	
                $("#_Popup_" + this.ID).remove();                
                $.popup._maintainPosition(false);
            }
            if ($("#_overlay").length > 0) {               		        	
                $("#_overlay").remove();                                
            }            
        },

        _autoClose: function() {
            setTimeout("$.popup._hide()", this.autoClose * 1000);
        },

        _reposition: function() {              	
            var top = this.top || (($(document).height() / 2) - ($("#_Popup_" + this.ID).outerHeight()/2));
            var left = this.left || (($(document).width() / 2) - ($("#_Popup_" + this.ID).outerWidth()/2));
					                       
            if (top < 0) top = 0;
            if (left < 0) left = 0;
            // IE6 fix
            //if ($.browser.msie && parseInt($.browser.version) <= 6) top = top + $(window).scrollTop();
            $("#_Popup_" + this.ID).css({
                top: top + 'px',
                left: left + 'px'
            });           
        },

        _maintainPosition: function(status) {
            if ($.popup.repositionOnResize) {
                switch (status) {
                    case true:
                        $(window).bind('resize', $.popup._reposition); //绑定事件
                        break;
                    case false:
                        $(window).unbind('resize', $.popup._reposition); //解绑事件
                        break;
                }
            }
        }
    }
    
    showPrompt = function(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup) {    		
        $.popup.prompt(title, msg, isButtonRow, autoClose, isOverlay, callback, top, left, width, height, isPopup);
    }

})(jQuery);


Popup.css

*
{
	padding:0;
	margin:0;	
}
.overlay {
  position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 0px; 
	height: 0px; 
	z-index: 99; 
	background-color: #CCCCCC; 
	layer-background-color: #CCCCCC; 
	border: 1px none #000000; 
	filter: Alpha(Opacity = 50, FinishOpacity =50);
}

/*------- Prompt Style -------*/
.popup_prompt{
	border:1px solid #909090; 
	background:#D0E8FF; 
}
.popup_prompt .popup_header{	
	background:#328AA4;
}
.popup_prompt h1
{
	height:25px;
	margin:0px;
	font-size:13px;
	color:#FFF;
	font-weight:bold;
	text-indent:10px;
	padding-top:7px;
}
.popup_prompt .prompt_button
{
	float:right;
  cursor: hand;
  font-size:20px;
  color:#FFF; 
}

.popup_prompt .popup_content
{
	margin:1px;
	padding:10px;
	font-size:13px;
}
.popup_prompt .buttonRow
{
	height:30px;
	line-height:30px;
	text-align:right;
	margin:1px;
}
.popup_prompt input
{
	color:#555;
	border:1px solid #808080;
	margin-right:5px;
	height:20px;
	line-height:18px;
	padding:0px 3px;
}


功能依赖jQuery,记得引入。

使用时只需一行代码

 

示例1

showPrompt('对话框1', '自定义显示内容')


 

示例2

showPrompt('对话框2', '自定义显示内容',1)


 

示例3

showPrompt('对话框3', '自定义显示内容',2)


 

关于样式颜色修改：

Popup.css中

.popup_prompt的background为 对话框底色

.popup_prompt .popup_header的background为 对话框标题底色

.popup_prompt h1的color为 对话框标题文字前景色

.popup_prompt .prompt_button的color为 对话框标题关闭按钮前景色

 

 

Demo下载

w93223010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通用jQuery对话框dialog或popup弹出层或提示窗口插件
07-03
在网页开发中，jQuery对话框（dialog）和popup弹出层是常见的用户交互元素，用于显示警告、确认信息、提供详细内容或者进行表单输入等。这些组件为网站增加了丰富的用户体验，使得信息传递更加直观和高效。本篇将...
利用jQuery ui dialog 显示表单对话框通用JS方法
￠虾咪┆℡ 的博客
08-23 859
function showPage2(url, dialogWidth, dialogHeight,title) { /// <summary> /// 利用jQuery ui dialog 显示表单对话框； ///注：调用本方法前，请确认已在本页面中加载jquery.js和jquery-ui.js以及jquery-ui.min.css文件 /// </summary
jQuery插件之对话框插件
03-26 2064
在页面开发过程中，经常要与用户进行交互，例如在提交表单时，如果文本框(text)中内容为空，需要提醒用户输入内容，一般的做法是使用传统的javascript语言中的alert()函数弹出一个信息窗口；另外，在删除某项记录时，也需要告知用户确定，可用javascript语言中的confirm()函数，虽然这两个函数都可以实现相应的功能，但没有动画效果，功能单一，用户体验差。在jQuery UI中，通
15款基于 jQuery模态对话框
weixin_30938149的博客
03-22 85
在数字世界的竞争已大大增加。这就是为什么要确保网络设计的各个方面都是一流的，这是很重要的。从布局到一些非常小的东西，比如对话框，每一件都需要设计得很好。对话框通常被忽视，但它们可能对访问者有很大的影响。是否要显示错误信息，需要提醒访问者，或者简单地需要立即提供一个重要信息，您可以使用该对话框。 传统的对话框现在是一个通行证。网页设计人员总是在寻找新的方法来增强这些盒子的外观，而不影响网站的性能和...
【精品推荐】web开发人员应该知道的31个jQuery模态对话框
anyuma8815的博客
11-25 147
在网站开发中经常会用到模态窗口，如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口，虽然实现了模式窗口的功能，但十分的不好看。当我们遇到这样的需求时很多人会从网上寻找这些jQuery的模态对话框，有时候搜索了很多，但都不是很合适，那为什么人们喜欢模态窗口呢？那模态窗口到底有什么优点呢？ 当一个模态窗口包含一个较小的元素时，用户并不需要加载...
js/jquery写的一个定制对话框控件
舟
04-30 1252
最近在做一个游戏项目，
jquery对话框去掉右上角叉子
Coding a Life
07-26 4338
jquery的对话框有多种使用场景，比如提示信息、让用户选择等等。在有些场景下，用户操作对话框后需要执行事件：比如弹出的对话框播放音乐，关闭对话框是音乐要停止，这时候就需要使用事件。 一种方法是实现close事件，在close函数中操作，这种是比较通用的处理，在“只要对话框关闭，就执行xxx”这种模式下推荐使用。 还有一种方式是隐藏右上角的叉子，这样只能通过对话框上的按钮来执行对应的逻辑。
jQuery通用dialog对话框 popup提示信息窗口插件demo
05-23
**jQuery通用Dialog对话框与Popup提示信息窗口插件** 在前端开发中，用户交互界面的友好性和用户体验至关重要。jQuery提供了一种便捷的方式来实现这一目标，那就是通过Dialog对话框和Popup提示信息窗口。本文将深入...
通用Dialog对话框.
08-20
- JavaScript中，可以使用HTML5的元素或者jQuery UI库创建对话框。 5. 使用技巧： - 模态与非模态：模态对话框会阻止用户与父窗口的交互，直到对话框关闭；而非模态对话框则允许用户同时操作多个窗口。 - 自定义...
jquery通用的iframe弹层插件，兼容主流浏览器
05-23
本文将深入探讨“jquery通用的iframe弹层插件，兼容主流浏览器”这一主题，涵盖jQuery、iframe、前端开发以及浏览器兼容性等相关知识点。 首先，jQuery的核心优势在于它的API设计，它提供了丰富的选择器、DOM操作...
学习jQuery这一篇就够了
热门推荐
轻松的小希
11-25 10万+
目录第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2.1.1.5、并集选择器2.1.1.6、交集选择器2.1.2、层级选择器2.1.2.1、子代选择器2.1.2.2、后代选择器2.1.2.3、兄弟选
更改select内option的属性
w93223010的专栏
10-18 1776
帮一位友人解决了一个小问题，需求是更改选中选项卡内显示的文本值，新值存放在某个文本框内   初始窗口 原窗口 var parentValue=""; //全局变量，用于保存点击详情时select中指定opeion的值 function detail() { var select=document.getElementById('SHGX')
子窗口调用父窗口变量和函数示例
w93223010的专栏
09-29 1606
示例1：子窗口是新打开的窗口   父窗口: parent var parentPara='parent'; function parentFunction() { alert(parentPara); } 显示变量值 打开新窗口   子窗口: child
encodeURI和DecodeURI方法示例
w93223010的专栏
11-01 766
function encode() { var val=document.getElementById('txt1').value; document.getElementById('result').innerHTML=encodeURI(val); } function decode() { var val=document.getElementById('
JQuery UI组件与API详解
"这篇文档是关于JQuery UI组件的API操作指南，涵盖了使用...在实际开发中，根据项目需求选择合适的方法，并结合JQuery UI提供的各种组件，如对话框、滑块、日期选择器等，可以创建出功能强大且用户体验良好的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值