當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

發布時間：2024/9/5 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了原生Js封装的弹出框-弹出窗口-页面居中-多状态可选小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現了一下功能：

1.title可自定義可拖拽

2.width height可以自定義

3.背景遮罩和透明度可以自定義

4.可以自己編輯彈出框里的html

5.確定取消按鈕可選

調用方法：

1 Prompt.add();//生成遮罩和彈出div 2 3 4 5 Prompt.init({ //修改參數 6 title : "我是個alert彈出框", 7 shade : true, 8 opacity : 20, 9 width : 800, 10 height : 150, 11 ConfirmFun : a1, 12 CancelFun : a2, 13 html : "我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框!" 14 });

在線效果預覽：http://jsfiddle.net/dtdxrk/A2trz/embedded/result/

<!DOCTYPE HTML><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生Js封裝的彈出框-彈出窗口-頁面居中-多狀態可選</title> <style type="text/css">*{margin:0;padding: 0;}body{height: 2000px;}#txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}div#shadeDiv{display:none;position: absolute;top: 0;left: 0; opacity: 1; filter: alpha(opacity=100);z-index: 9998;background-color: #000;}div#prompt{border-radius:5px; display:none;border: 1px solid #CCC; position:fixed;_position: absolute;z-index: 9999;background-color: #fff;}div#prompt_title{ cursor:move;border-radius:5px;font-size:14px;font-weight: bold;color: #333;padding-left:10px;height: 35px;line-height: 35px;border-bottom: 1px solid #ececec;background-color:#fcfcfc; }span#prompt_close{ position: absolute;right: 10px;top: 10px; cursor: pointer; background: url("bd_split_210d2d99.gif") no-repeat -281px -41px; width: 14px;height: 13px;outline: none;display: block;}div#prompt_body{padding: 30px 20px;font-size:13px;line-height: 1.5;}div#prompt_bottom{display:none;position: absolute;bottom: 15px;right: 15px;}div#prompt_bottom a.btn{_display:block;_float:left;border: 1px solid #888;border-radius:2px;font-size: 13px;padding: 5px 8px ;margin-left: 10px;cursor: pointer; color: #000000; color: #000000!important; background: #F3F3F3; background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%); background: -webkit-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%); background: -o-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%); background: -ms-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType=0 ); background: linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);}div#prompt_bottom a.btn:hover{border: 1px solid blue;} </style><body><div id="txt"><h1>需要實現的狀態</h1><p>1.是否有遮罩層</p><p>2.是否有title</p><p>3.alert & confirm</p><p>4.自定義彈出框里面的html</p><p>5.拖拽</p></div><button id="bt1" style="margin-top:200px;">有遮罩的alert彈出框</button> <button id="bt2">沒有標題和遮罩的confirm彈出框</button><select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <input type="text" class="cityinput" id="city2" value="城市名"> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <br/> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <select name="IE6" ><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <br/> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <br/> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <br/> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select> <select name="IE6"><option>1</option><option>2</option><option>3</option> </select><button id="bt3">有確定按鈕的alert彈出框</button> <button id="bt4">自定義html內容的彈出框</button><script type="text/javascript">var Prompt = {$ : function(id){return document.getElementById(id)},add : function(){ //生成div和遮罩層this.createShade();this.createPrompt();},init :function(option){ var title = this.title = option.title || false,shade = this.shade = option.shade || false, //是否顯示遮罩 opacity = this.opacity = option.opacity || 20, //遮罩透明度 width = this.width = option.width || 500,height = this.height = option.height || 300,_temp = this._temp = option.html || "",ConfirmFun = this.ConfirmFun = option.ConfirmFun || false,CancelFun = this.CancelFun = option.CancelFun || false;this.editTitle();this.editHtml();if(ConfirmFun){ this.showBottom();}else{this.hideBottom();}this.show();},editTitle : function(){ //title div生成var prompt_title = this.$("prompt_title");if(this.title){prompt_title.innerHTML = this.title;//添加拖拽方法this.drag();prompt_title.style.display = "block";}else{prompt_title.style.display = "none";}},editHtml : function(){var prompt_body = this.$("prompt_body");prompt_body.innerHTML = this._temp;},createPrompt : function(){ //創建彈出的divvar doc = document,Div = doc.createElement("div");Div.id = "prompt";Div.innerHTML = "<span id='prompt_close'></span><div id='prompt_title'></div><div id='prompt_body'></div><div id='prompt_bottom'></div>";doc.body.appendChild(Div);var prompt_close = this.$("prompt_close");this.addHandler(prompt_close,"click",this.hide);},showBottom : function(){ //創建確定取消按鈕var that = this,prompt_bottom = that.$("prompt_bottom");if(that.CancelFun){prompt_bottom.innerHTML = "<a class='btn' id='ConfirmFun'>確定</a><a class='btn' id='CancelFun'>取消</a>";that.addHandler(that.$("ConfirmFun"),"click",function(){that.hide();that.ConfirmFun();});that.addHandler(that.$("CancelFun"),"click",function(){that.hide();that.CancelFun();});}else{prompt_bottom.innerHTML = "<a class='btn' id='ConfirmFun'>確定</a>";that.addHandler(that.$("ConfirmFun"),"click",function(){that.hide();that.ConfirmFun();});}prompt_bottom.style.display = "block";},hideBottom : function(){this.$("prompt_bottom").innerHTML = "";this.$("prompt_bottom").style.display = "none";},show : function(){var promptDiv = Prompt.$("prompt"),shadeDiv = Prompt.$("shadeDiv"),bodyHeight = document.documentElement.clientHeight || document.body.clientHeight ;promptDiv.style.display = "block";promptDiv.style.width = this.width + "px";promptDiv.style.height = this.height + "px";promptDiv.style.left = (this.bodyWidth/2-this.width/2)+ "px";promptDiv.style.top = (bodyHeight/2-this.height/2) + "px";if(this.shade){shadeDiv.style.display = "block";if (document.all) {shadeDiv.filters.alpha.opacity = this.opacity;shadeDiv.style.zoom = 1 ;}else {shadeDiv.style.opacity = this.opacity / 100;}}if(this.IE6()) promptDiv.appendChild(this.createIframe()); //ie6添加iframe },hide : function(){Prompt.$("prompt").style.display = "none";Prompt.$("shadeDiv").style.display = "none";},createShade : function(){ //創建遮罩層var doc = document,bodyWidth = this.bodyWidth = doc.documentElement.clientWidth || doc.body.clientWidth,bodyHeight = this.bodyHeight = doc.documentElement.scrollHeight || doc.body.scrollHeight,Div = doc.createElement("div");Div.id = "shadeDiv";Div.style.height = bodyHeight + "px";Div.style.width = bodyWidth + "px";Div.style.opacity = 0.2;if(this.IE6()) Div.appendChild(this.createIframe("shadeDiv")); //ie6添加iframe doc.body.appendChild(Div);},createIframe : function(div){var width,height;if(div == "shadeDiv"){width = this.bodyWidth;height = this.bodyHeight;}else{width = this.width;height = this.height;}var Iframe = document.createElement('iframe');Iframe.style.position = 'absolute';Iframe.style.zIndex = '-1';Iframe.style.left = '-1px';Iframe.style.top = 0;Iframe.style.border = 0;Iframe.style.filter = 'alpha(opacity=0)';Iframe.style.width = width + 'px';Iframe.style.height = height + 'px';return Iframe;},isDown : false,drag : function(){ //添加拖拽事件var that = this,mouseX,mouseY,objY,objX,prompt_title = this.$("prompt_title"),prompt = this.$("prompt");that.addHandler(prompt_title,"mousedown",function(event){var event = window.event || event;if(event.button == 0 || event.button==1){ //鼠標左鍵chrome=0 ie=1 (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默認行為 mouseX = event.clientX;mouseY = event.clientY;objY = parseInt(prompt.style.top);objX = parseInt(prompt.style.left);that.isDown = true;}});that.addHandler(document,"mousemove",function(event){if(that.isDown){var event = window.event || event;// (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默認行為 prompt.style.top = event.clientY - mouseY + objY + "px";prompt.style.left = event.clientX - mouseX + objX + "px";}});that.addHandler(document,"mouseup",function(){that.isDown = false;});},getPosition : function(obj) { //獲取元素在頁面里的位置和寬高var top = 0,left = 0,width = obj.offsetWidth,height = obj.offsetHeight;while(obj.offsetParent){top += obj.offsetTop;left += obj.offsetLeft;obj = obj.offsetParent;}return {"top":top,"left":left,"width":width,"height":height};},addHandler:function(node, type, handler){node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);},IE6 : function(){return !!window.ActiveXObject && !window.XMLHttpRequest;}}Prompt.add();document.getElementById("bt1").onclick = function(){Prompt.init({title : "我是個alert彈出框",shade : true,opacity : 20,width : 800,height : 150,html : "我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框我是個alert彈出框!"}); }document.getElementById("bt2").onclick = function(){Prompt.init({height: 200,html : "沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!",ConfirmFun : a1,CancelFun : a2 }); }document.getElementById("bt3").onclick = function(){Prompt.init({title : "有確定按鈕的彈出框",height: 200,html : "沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!沒有標題和遮罩的confirm彈出框!",ConfirmFun : a1}); }document.getElementById("bt4").onclick = function(){var str = "<h1>需要實現的狀態</h1>" +"<p>1.是否有遮罩層</p>" +"<p>2.是否有title</p>" +"<p>3.alert & confirm</p>" +"<p>4.自定義彈出框里面的html</p>" +"<p>5.拖拽</p>" +"<select name='IE6'>" +"<option>1</option>" +"<option>2</option>" +"<option>3</option>" +"</select>" +"<br>" +"<h2>可以自己添加修改css樣式</h2>" +"<iframe src='http://www.baidu.com' width='900' height='200'></iframe>" +"<h6>也可以自己添加方法</h6>";Prompt.init({title :"自定義html內容的彈出框",shade : true,opacity : 20,width :1000,height: 500,html : str}); }function a1(){Prompt.init({title : "我是確認彈出框",shade : true,height : 150,html : "我是確認彈出框!"}); }function a2(){Prompt.init({title : "我是取消的彈出框",shade : true,opacity : 20,width : 200,height : 150,html : "我是取消的彈出框"}); } </script></body> </html>

轉載于:https://www.cnblogs.com/dtdxrk/p/3254026.html

總結

以上是生活随笔為你收集整理的原生Js封装的弹出框-弹出窗口-页面居中-多状态可选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：在Spring中使用JDK定时器实现调度
下一篇：转：Java异常分类以及相应处理机制