JS实现自定义alert,自定义window.open
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
JavaScript中常⽤的3种弹出提⽰框(alert、confirm、prompt)⽬录alert ()confirm()prompt ()总结三种提⽰框alert ()confirm()prompt ()alert ()alert()⽅法是显⽰⼀条弹出提⽰消息和确认按钮的警告框。
需要注意的是:alert()是⼀个阻塞的函数,如果我们不点确认按钮,后⾯的内容就不会加载出来。
使⽤⽅式:alert("想要提⽰的⽂本内容")样例代码:<!DOCTYPE html><html><head><meta charset="utf-8"><script>alert("这是弹出框提⽰⽂本")</script><title></title></head><body><p>alert是阻塞的函数</p><p>这句话只有在确认弹出框的提⽰⽂本后才会显⽰</p></body></html>效果截图:confirm()confirm()⽅法是显⽰⼀个含有指定消息和确认和取消按钮的确认框。
如果点击"确定"返回true,否则返回false。
使⽤⽅式:不接收返回值:confirm("这样写可以直接显⽰,不接收返回值。
")接收返回值:var x;var r=confirm("请按下按钮!");if (r==true){x="你按下的是\"确定\"按钮。
";}else{x="你按下的是\"取消\"按钮。
";}document.write(x)样例代码:<!DOCTYPE html><html><head><meta charset="utf-8"><script>// 使⽤⽅式⼀confirm("这样写可以直接显⽰,不接收返回值。
Window.Open参数、返回值js弹窗
Window.Open参数、返回值一、window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法:window.open(pageURL,name,parameters)其中:pageURL为子窗口路径name为子窗口句柄parameters为窗口参数(各参数用逗号分隔)三、示例:<SCRIPT>window.open('page.html','newwindow','height=100,width=400,top=0,left =0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status= no')//写成一行</SCRIPT>脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
请对照。
上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。
四、各项参数其中yes/no也可使用1/0;pixelvalue为具体的数值,单位象素。
参数|取值范围|说明alwaysLowered|yes/no|指定窗口隐藏在所有窗口之后alwaysRaised|yes/no|指定窗口悬浮在所有窗口之上depended|yes/no|是否和父窗口同时关闭directories|yes/no|Nav2和3的目录栏是否可见height|pixelvalue|窗口高度hotkeys|yes/no|在没菜单栏的窗口中设安全退出热键innerHeight|pixelvalue|窗口中文档的像素高度innerWidth|pixelvalue|窗口中文档的像素宽度location|yes/no|位置栏是否可见menubar|yes/no|菜单栏是否可见outerHeight|pixelvalue|设定窗口(包括装饰边框)的像素高度outerWidth|pixelvalue|设定窗口(包括装饰边框)的像素宽度resizable|yes/no|窗口大小是否可调整screenX|pixelvalue|窗口距屏幕左边界的像素长度screenY|pixelvalue|窗口距屏幕上边界的像素长度scrollbars|yes/no|窗口是否可有滚动栏titlebar|yes/no|窗口题目栏是否可见toolbar|yes/no|窗口工具栏是否可见Width|pixelvalue|窗口的像素宽度z-look|yes/no|窗口被激活后是否浮在其它窗口之上1、最基本的弹出窗口代码其实代码非常简单:<SCRIPTLANGUAGE="javascript">window.open('page.html')</SCRIPT因为着是一段javascripts代码,所以它们应该放在<SCRIPTLANGUAGE="javascript">标签和</script>之间。
jquery中alert用法
jquery中alert用法在前端开发中,经常会用到jquery来进行DOM操作和事件处理。
其中,alert是一个常用的方法,用来弹出提示框来告知用户一些信息。
今天,我将来探讨一下jquery中alert的用法。
1. 简介在jquery中,alert是一个简单的方法,用来在页面上弹出一个提示框,显示一段文本信息。
它的用法非常简单,可以通过一行代码来实现。
2. 基本用法在jquery中,使用alert方法非常简单,只需要以下几行代码即可:```javascript$(document).ready(function(){alert("这是一个提示信息");});```以上代码中,$(document).ready()是jquery中用来在DOM加载完成后执行的方法,它确保了alert方法会在页面完全加载后执行。
而alert("这是一个提示信息")则是弹出一个提示框,显示文本"这是一个提示信息"。
3. 自定义样式除了基本的用法外,我们还可以通过一些技巧来自定义alert提示框的样式,使其更符合我们的页面风格。
可以通过CSS和一些jquery插件来实现。
4. 插件丰富性在jquery中,有很多第三方插件可以用来替代默认的alert提示框,这些插件通常具有更丰富的功能和更灵活的样式定制。
可以使用SweetAlert插件来实现更漂亮的提示框,或者使用Bootstrap框架的Modal组件来实现类似的效果。
5. 个人观点jquery中的alert方法是一个简单而实用的工具,可以帮助我们在页面上显示提示信息,提示用户一些重要的内容。
虽然它的默认样式比较简单,但通过一些技巧和插件,我们可以实现更丰富的效果,提升用户体验。
在本篇文章中,我简要介绍了jquery中alert的基本用法以及一些扩展技巧,希望能帮助大家更好地使用这个方法来提升页面功能和用户体验。
javascript弹出窗口代码大全
javascript弹出窗⼝代码⼤全如何利⽤⽹页弹出各种形式的窗⼝,我想⼤家⼤多都是知道些的,但那种多种多样的弹出式窗⼝是怎么搞出来的,今天找了⼀篇好⽂学习了: 1.弹启⼀个全屏窗⼝<html><body onload="window.open('','example01','fullscreen');">;<b></b></body></html> 2.弹启⼀个被F11化后的窗⼝<html><body onload="window.open(''','example02','channelmode');">;<b></b></body></html> 3.弹启⼀个带有收藏链接⼯具栏的窗⼝<html><body onload="window.open('','example03','width=400,height=300,directories');"><b></b></body></html> 4.⽹页对话框<html><SCRIPT LANGUAGE="javascript"><!--showModalDialog(','example04','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html><html><SCRIPT LANGUAGE="javascript"><!--showModelessDialog(','example05','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes')//--></SCRIPT><b></b></body></html> showModalDialog()或是showModelessDialog() 来调⽤⽹页对话框,⾄于showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开的窗⼝(简称模式窗⼝),置在⽗窗⼝上,必须关闭才能访问⽗窗⼝(建议尽量少⽤,以免招⼈反感);showModelessDialog()dialogHeight: iHeight 设置对话框窗⼝的⾼度。
修改jsconfirmalert提示框文字的简单实例
修改jsconfirmalert提⽰框⽂字的简单实例修改js confirm alert 提⽰框⽂字的简单实例<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><style>*{padding: 0; margin: 0;}html{height: 100%;}body{font-size: 16px; font-family: "Microsoft Yahei"; height: 100%;}h1,h2,h3{font-weight: lighter;}a{text-decoration: none;}#selfWinsow{width: 60%; margin: 0 20%; background: #fff; position: fixed;top: 35%;border: 1px solid #ccc; padding: 0 2% 2% 2%;}#slefClose{width: 25px; height: 25px; position: absolute;right: 1rem; top: 0.4rem; z-index: 9999; cursor: pointer;}#slefClose::after{position: absolute; width: 30px; height: 30px; content: "×"; font-size: 2.5rem; line-height: 30px;}#selfWinsow h2{font-size: 1rem; border-bottom: 1px solid #ccc; line-height: 100%; padding:1rem 0;}#selInfo{font-size: 0.95rem; line-height: 2.1rem; padding: 0.5rem;}#selfBtBox{padding: 1rem; margin: 0px auto; border: 1px solid #ccc; overflow: hidden;}.selfBt{padding: 0.8rem 2%;background: #323434; color: #fff; float: left; line-height: 100%; text-align: center; cursor: pointer;}.selfBtDouble{width: 46%;}.selfBtSingle{color: #fff; width: 100%; padding: 0.8rem 0;}#selfOk{background: #323434;}.selftalkNo{float: left;position: relative;top: -5px;padding: 4px 10px;display: inline-block;margin-left: 5px;color: #000;}.selftalkOk{float: right;position: relative;top: -5px;display: inline-block;margin-right: 5px;padding: 4px 10px;color: #fff;}#selfNo,#linkTo2{background: #eeeeee; color: #555555}#selfBack{width: 100%; background: rgba(0,0,0,.6);}#selfInput{display: block;width: 100%; padding: 0.5rem 0; border: 1px solid #eee; border-radius: 3px; margin-bottom: 1rem; text-indent: 0.6rem}#selfInput:focus{border: 1px solid #087690;}</style><title></title><script src="/libs/jquery/2.1.4/jquery.min.js"></script><!--<script type="text/javascript" src="SelfWindow.js"></script>--><script>/**selfWindow组建,主要是⽤于模拟移动⽹站的alert(),confirm()窗⼝点解某⼀按钮跳转到某⼀个页⾯的效果,*因为给予移动web,所以没有兼容低版本ie*调⽤⽅法:var win = new SelfWinsow({* types : "confirm",//这⾥可以选择的参数有,alert,confirm,confirm2,link* slefTitle : "⾹送⽹温馨提⽰",//弹窗标题* selfInfo : "Are you really to remove this tool?",//弹窗信息* selfOk : "YES",//⾃定义确定按钮⽂字* selfNo : "NO",//⾃定义否认按钮⽂字* callback:fn,//当types为confirm,confirm2或者是talk时的回调函数,confirm为模拟*/var SelfWinsow = function(settings){this.init(settings)};SelfWinsow.prototype = {init:function(settings){this.opts = {types : "",slefTitle : "",selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?",selfOk : "continue operator the deposit",selfNo : "back loading page"};this.setting(settings);if(typeof settings == "string"){this.opts.selfInfo == settings;}if(settings == "" || settings == undefined || settings == null){this.selfAlert();}else if(settings.types == "confirm"){}else if(settings.types == "confirm2"){this.selfConfirm2();}else if(settings.types == "link"){this.selfLink();}else if(settings.types=="talk"){this.selfMobileTalk();}else{this.selfAlert();}},//confirm窗⼝selfConfirm:function(){var _this = this;var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/div><div id='selfNo' class='selfBt selfBt this.createMask(html);this.selfEvents();},//alert窗⼝selfAlert:function(){var _this = this;var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";this.createMask(html);this.selfEvents();},selfConfirm2:function(){var _this = this;var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><div id='selfOk' class='selfBt selfBtSingle'>"+_this.opts.selfOk+"<\/div><\/div>";this.createMask(html);this.selfEvents();},//带链接窗⼝selfLink:function(){var _this = this;var html="<div id='selfWinsow'><div id='slefClose'><\/div><h2 id='slefTitle'>"+_this.opts.slefTitle+"<\/h2><p id='selInfo'>"+_this.opts.selfInfo+"<\/p><a id='selfOk' href='"+_this.opts.linkTo1+"' class='selfBt selfBtDouble'>"+_this.opts.selfOk+"<\/a><a id='link this.createMask(html);this.selfEvents();},selfMobileTalk:function(){var _this = this;var html="<div id='selfWinsow' style='width:100%;margin:0px;top:0;left:0;padding:0; background:none;border:none;font-size:16px'><h2 style='text-align:center; background:#fff' id='slefTitle'><span id='selfNo' style='background:#fff;cursor: pointer;' class='selfta this.createMask(html);var selfBack = document.getElementById("selfBack");selfBack.style.backgroundColor="#eee";this.selfEvents();},//事件处理selfEvents:function(){this.selfOk();var selfNo = document.getElementById('selfNo');selfNo && this.slefNo();},//确定按钮事件selfOk:function(){var _this = this;var type = this.opts.types;var bt=true;var selfOk = document.getElementById("selfOk");function selfOkFun(e){var e = e || window.event;var el = e.scrElement || e.target;if (el.id == "selfOk" || el.tagName=="IMG") {if(type == "alert"){_this.selfRemoveBack();}else if(type == "confirm" || type == "talk" || "confirm2"){if(bt){_this.opts.callback();}else{return false;}_this.selfRemoveBack();bt=false;}}}document.removeEventListener('click',selfOkFun,false);document.addEventListener('click',selfOkFun,false);},//创建背景遮罩createMask:function(html){var selfBack = document.getElementById("selfBack");if(selfBack){return false;}else{var selfBack=document.createElement('div');selfBack.id = "selfBack";selfBack.style.position = "fixed",selfBack.style.top = "0",selfBack.style.left = "0",selfBack.style.right = "0",selfBack.style.bottom = "0",document.body.appendChild(selfBack);selfBack.innerHTML = html;this.slefClose();}},//关闭按钮事件slefClose:function(){var _this = this;document.addEventListener('click',function(e){var e = e || window.event;var el = e.scrElement || e.target;if(el.id == "slefClose"){if(_this.opts.callback){_this.opts.callback = function(){};_this.selfRemoveBack();return;}_this.selfRemoveBack();}});},slefNo:function(){var _this = this;document.addEventListener('click',function(e){var e = e || window.event;var el = e.scrElement || e.target;if(el.id == "selfNo" ||el.tagName == "IMG"){if(_this.opts.callback){_this.opts.callback = function(){};_this.selfRemoveBack();return;}_this.selfRemoveBack();}})},//移除窗⼝功能selfRemoveBack:function(){try{var selfBack = document.getElementById('selfBack')document.body.removeChild(selfBack);}catch(e){}},//参数配置功能函数exetends:function(a,b){for( var attr in b){a[attr] = b[attr];}},//参数配置以及重写setting:function(settings){this.exetends(this.opts,settings)},}</script><script>window.onload = function(){var Ord1 = document.getElementById("rd1");var Ord2 = document.getElementById("rd2");var Otext = document.getElementById("text");var Obtn = document.getElementById("btn");var browser = navigator.appName;var getText = function(objText){/*if(browser == 'Netscape'){if(objText.indexOf("TextArea") > -1){return objText.value;}else{return objText.textContent;}}else if(browser == 'Microsoft Internet Explorer'){return objText.innerText;}*/return objText.value;}var text = getText(Otext);var len= text.length;Otext.disabled = true;/*Ord2.onclick = function(){if(Ord2.checked){//alert("ok");if(len == 0){var selfConfirm = new SelfWinsow({types : "confirm",callback:function(){}});//alert(selfConfirm);Otext.disabled = false;//Otext.onfocus;}}}Ord1.onclick = function(){if(Ord1.checked){Otext.disabled = true;Otext.value = "";Otext.innerText = "";Otext.textContent = "";}}*/var aadEvent = function(e, type, target){e = e || window.e;if(e.addEventListener){e.addEventListener(type, function(){if(e.id == 'rd2'){target.disabled = false;var selfConfirm = new SelfWinsow({slefTitle : "option tips for user",types : "confirm",selfInfo : typeof settings == "string" ? settings : "if have any incorrect , and you will continue?", selfOk : "continue operator the deposit",selfNo : "back loading page",callback:function(){}});}else if(e.id == 'rd1'){target.innerIext = '';target.value = '';target.textContent = "";target.disabled = true;}else if(e.id == 'btn'){var text = getText(target);var len= text.length;if(target.disabled==false && len == 0){var selfConfirm = new SelfWinsow({slefTitle : "option tips for user",types : "alert",selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",selfOk : "OK",callback:function(){}});}}}, false);}else if(e.attachEvent){e.attachEvent('on'+'type', function(){if(e.id == 'rd2'){target.disabled = false;var selfConfirm = new SelfWinsow({types : "confirm",callback:function(){}});}else if(e.id == 'rd1'){target.innerIext = '';target.value = '';target.textContent = "";target.disabled = true;}else if(e.id == 'btn'){var text = getText(target);var len= text.length;if(target.disabled==false && len == 0){var selfConfirm = new SelfWinsow({slefTitle : "option tips for user",types : "alert",selfInfo : typeof settings == "string" ? settings : "please input textarea content for customer",selfOk : "OK",callback:function(){}});}}}, false);}};aadEvent(Ord2, 'click', Otext);aadEvent(Ord1, 'click', Otext);aadEvent(Obtn, 'click', Otext);}</script></head><body style="width:80%; margin: 20% auto;"><form action="" method="get"><input id="rd1" form="btn" type="radio" value="11111" name="radio" checked=true>first time purchase<br/><br/><section style="float:left;"><input id="rd2" form="btn" type="radio" value="22222" name="radio" >Alternate(s) offer:</section><section style="float:left; margin:10px 10px"><textarea id="text" form="btn" cols="30" rows="7" maxlength="100" style="width:600px;"></textarea></section></form><footer style="clear:both; float:right; margin-right:10%;"><input id="btn" name="btn" type="submit" value="Next" style="width:60px; height:30px"></footer></body></html>以上这篇修改js confirm alert 提⽰框⽂字的简单实例就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。
自定义提示框(alert、confirm可自定义标题内容图标取消按钮)
⾃定义提⽰框(alert、confirm可⾃定义标题内容图标取消按钮)声明:本例⼦是基于做的修改效果:【主函数】1、msgbox(title,text,func,cancel,focus,icon)参数说明:title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显⽰图⽚的异常text :弹出对话框的内容,可以使⽤HTML代码,例如<font color='red'>删除么?</font>,如果直接带⼊函数,注意转义func :弹出对话框点击确认后执⾏的函数,需要写全函数的引⽤,例如add(),如果直接带⼊函数,注意转义。
cancel :弹出对话框是否显⽰取消按钮,为空的话不显⽰,为1时显⽰focus :弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上icon :弹出对话框的图标<p><input onclick="msgbox('提⽰','请⾄少选择⼀项需要删除的记录!','',null,0,'Warning')" type="button" value="提⽰"/><input onclick="msgbox('提⽰','操作执⾏成功!','',null,0,'true')" type="button" value="操作成功"/><input onclick="msgbox('提⽰','操作执⾏失败!','',null,0,'error')" type="button" value="操作失败"/><input onclick="msgbox('确认删除么?','点击确认执⾏删除操作,点击取消不再执⾏操作!','msgbox(\'操作提⽰\',\'删除成功!\',\'\',null,0,\'true\')',1,1,'Warning')" type="button" value="confirm"/></p><script type="text/javascript" language="javascript">// <![CDATA[function msgbox(title,content,func,cancel,focus,icon){/*参数列表说明:title :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显⽰图⽚的异常text :弹出对话框的内容,可以使⽤HTML代码,例如<font color='red'>删除么?</font>,如果直接带⼊函数,注意转义func :弹出对话框点击确认后执⾏的函数,需要写全函数的引⽤,例如add(),如果直接带⼊函数,注意转义。
JavaScript三种弹出框(alert,confirm和prompt)用法举例
JavaScript三种弹出框(alert,confirm和prompt)⽤法举例我们在做⽹页交互的时候往往需要⽤户在操作之前弹出⼀个提⽰消息框来让⽤户做⼀些点击才能继续或者放弃,这⾥有三种模式消息框,它们分别是alert(),confirm()和prompt()。
下⾯我⽤最简单的⽅式和例⼦来做⼀下介绍:1、alert()--警告消息框alert ⽅法有⼀个参数,即希望对⽤户显⽰的⽂本字符串。
该字符串不是 HTML 格式。
该消息框提供了⼀个“确定”按钮让⽤户关闭该消息框,并且该消息框是模式对话框,也就是说,⽤户必须先关闭该消息框然后才能继续进⾏操作。
例如:window.alert("欢迎!请按“确定”继续。
"),将会出现下⾯的情况Paste_Image.png2、confirm()--确认消息框使⽤确认消息框可向⽤户问⼀个“是-或-否”问题,并且⽤户可以选择单击“确定”按钮或者单击“取消”按钮。
confirm ⽅法的返回值为 true 或 false。
该消息框也是模式对话框:⽤户必须在响应该对话框(单击⼀个按钮)将其关闭后,才能进⾏下⼀步操作。
例如: var truthBeTold = window.confirm("单击“确定”继续。
单击“取消”停⽌。
"),情况如下if (truthBeTold) {window.alert("欢迎访问我们的 Web 页!");} elsewindow.alert("再见啦!");Paste_Image.png当你点击确定的时候:Paste_Image.png当你点击取消的时候:Paste_Image.png3、prompt()--提⽰消息框提⽰消息框提供了⼀个⽂本字段,⽤户可以在此字段输⼊⼀个答案来响应您的提⽰。
该消息框有⼀个“确定”按钮和⼀个“取消”按钮。
如果您提供了⼀个辅助字符串参数,则提⽰消息框将在⽂本字段显⽰该辅助字符串作为默认响应。
JavaScript写的一个自定义弹出式对话框代码
JavaScript写的⼀个⾃定义弹出式对话框代码下图是我的设计思路下⾯是具体的js代码1,⾸先定义⼏个⾃定义函数代码复制代码代码如下://判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function';}//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}2,具体的窗体实现代码代码复制代码代码如下://弹出窗⼝,标题(html形式)、html、宽度、⾼度、是否为模式对话框(true,false)、按钮(关闭按钮为默认,格式为['按钮1',fun1,'按钮2',fun2]数组形式,前⾯为按钮值,后⾯为按钮onclick事件)function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度(也即整个屏幕的宽度和⾼度)var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true,即模式对话框的话,就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; //标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText,所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分,CSS中的overflow使得当内容⼤⼩超过此范围时,会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话,就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性,所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = '关闭';// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/*************************************以下为拖动窗体事件*********************///⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left);//移动⿏标事件tBar.onmousemove = function(){if(moveable){var eve = getEvent();var x = toLeft + eve.clientX - mouseX;var y = toTop + eve.clientY - mouseY;if (x > 0 && (x + width < w) && y > 0 && (y + height < h)){win.style.left = x + "px";win.style.top = y + "px";}}}//放下⿏标事件,注意这⾥是document⽽不是tBardocument.onmouseup = function(){moveable = false;}}//获取浏览器事件的⽅法,兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);remChild(mask);}}实例调⽤复制代码代码如下:str = "看看我的窗体效果";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);更为完整实⽤的代码,包括定义和调⽤代码复制代码代码如下:<html><head><title>⾃定义弹出对话框</title><style type ="text/css" >.layout{width:2000px;height:400px;border:solid 1px red;text-align:center;}</style><script type="text/javascript">//判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function'; }//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}//弹出窗⼝,标题(html形式)、html、宽度、⾼度、是否为模式对话框(true,false)、按钮(关闭按钮为默认,格式为['按钮1',fun1,'按钮2',fun2]数组形式,前⾯为按钮值,后⾯为按钮onclick事件)function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度(也即整个屏幕的宽度和⾼度)var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true,即模式对话框的话,就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";//标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText,所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分,CSS中的overflow使得当内容⼤⼩超过此范围时,会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话,就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性,所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = "关闭";// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/******************************************************以下为拖动窗体事件************************************************/ //⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left); //移动⿏标事件 tBar.onmousemove = function() { if(moveable) { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) { win.style.left = x + "px"; win.style.top = y + "px"; } } } //放下⿏标事件,注意这⾥是document⽽不是tBar document.onmouseup = function() { moveable = false; } }//获取浏览器事件的⽅法,兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);if (mask){remChild(mask);}}}function addCheckbox(name,value,id,click){var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' onclick='" + (click == null ? '':click) + "'/> <label for='" + id + "'>" + value + "</label>";return str;}function show(){var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区:" + addCheckbox('all','全(不)选','cities_all','selectAll(this,\"cities_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('cities_cb','长沙市','cities_cb1') + "</td><td>" + addCheckbox('cities_cb','株洲市','cities_cb2') + "</td><td>" + addCheckbox('cities_cb','湘潭市','cities_cb3') + "</td><td>" + addCheckbox('cities_cb','衡阳市','cities_cb4') + " </td><td>" + addCheckbox('cities_cb','益阳市','cities_cb5') + "</td>";str += "<td>" + addCheckbox('cities_cb','常德市','cities_cb6') + "</td><td>" + addCheckbox('cities_cb','岳阳市','cities_cb7') + "str += "<tr><td>" + addCheckbox('cities_cb','邵阳市','cities_cb8') + "</td><td>" + addCheckbox('cities_cb','郴州市','cities_cb9') + "</td><td>" + addCheckbox('cities_cb','娄底市','cities_cb10') + "</td>";str += "<td>" + addCheckbox('cities_cb','永州市','cities_cb11') + "</td><td>" + addCheckbox('cities_cb','怀化市','cities_cb12') + "</td><td>" + addCheckbox('cities_cb','张家界市','cities_cb13') + "</td><td>" + addCheckbox('cities_cb','湘西⾃治州','cities_cb14') + "</td></tr>";str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='10' style='text-align:center'>请选择矿种:" + addCheckbox('all','全(不)选','class_all','selectAll(this,\"class_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铋','class_cb1') + "</td><td>" + addCheckbox('class_cb','钒','class_cb2') + "</td> <td>" + addCheckbox('class_cb','⾦','class_cb3') + "</td><td>" + addCheckbox('class_cb','煤','class_cb4') + "</td><td>" + addCheckbox('class_cb','锰','class_cb5') + "</td><td>" + addCheckbox('class_cb','钼','class_cb6') + "</td><td>" + addCheckbox('class_cb','铅','class_cb7') + "</td><td>" + addCheckbox('class_cb','⽯膏','class_cb8') + "</td><td>" + addCheckbox('class_cb','⽯煤','class_cb9') + "</td><td>" + addCheckbox('class_cb','锑','class_cb10') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') + "</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</td><td>" + addCheckbox('class_cb','钨','class_cb13') + "</td><td>" + addCheckbox('class_cb','锡','class_cb14') + "</td><td>" + addCheckbox('class_cb','锌','class_cb15') + "</td><td>" + addCheckbox('class_cb','银','class_cb16') + "</td><td>" + addCheckbox('class_cb','萤⽯','class_cb17') + "</td><td>" + addCheckbox('class_cb','铀','class_cb18') + "</td><td>" + addCheckbox('class_cb','稀⼟氧化物','class_cb19') + "</td><td>" + addCheckbox('class_cb','重晶⽯','class_cb20') + "</td> </tr>";str += "<tr><td>" + addCheckbox('class_cb','硼','class_cb21') + "</td><td>" + addCheckbox('class_cb','磷','class_cb22') + "</td><td>" + addCheckbox('class_cb','⽔泥灰岩','class_cb23') + "</td><td>" + addCheckbox('class_cb','熔剂灰岩','class_cb24') + "</td><td>" + addCheckbox('class_cb','冶⾦⽩云岩','class_cb25') + "</td><td>" +addCheckbox('class_cb','岩盐','class_cb26') + "</td><td>" + addCheckbox('class_cb','芒硝','class_cb27') + "</td><td>" + addCheckbox('class_cb','钙芒硝','class_cb28') + "</td><td>" + addCheckbox('class_cb','地下⽔','class_cb29') + "</td><td>" + addCheckbox('class_cb','地下热⽔','class_cb30') + "</td></tr>";str += "</table></div></div>";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);}function selectAll(obj,oName){var checkboxs = document.getElementsByName(oName);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}}function getStr(cbName){var cbox = document.getElementsByName(cbName);var str = "";for (var i=0;i<cbox.length;i++){if(cbox[i].checked){str += "," + cbox[i].value;}}str = str.substr(1);return str;}function fun1(){var str = getStr('cities_cb');alert('你选择的地区为:' + str);}function fun2(){var str = getStr('class_cb');alert('你选择的矿种为:' + str);}</script><body><div class ="layout"></div><div class ="layout"></div><div class ="layout"><input type="button" value="显⽰" onclick="show()" /> </div></body></html>此脚本在ie,firefox浏览器下运⾏通过。
js实现自定义弹窗
js实现⾃定义弹窗 众所周知,浏览器⾃带的原⽣弹窗很不美观,⽽且功能⽐较单⼀,绝⼤部分时候我们都会按照设计图⾃定义弹窗或者直接使⽤注⼊layer 的弹窗等等。
前段时间在上看到了⼀个⾃定义弹窗的实现,⾃⼰顺便就学习尝试写了下,下⾯是主要的实现代码并添加了⽐较详细的注释,分享出来供⼤家参考。
(代码⽤了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后⾯有时间更新为⼀个兼容性较好的es5版本)HTML部分:(没什么内容放置⼀个按钮调⽤函数,js中调⽤实例即可供参考)<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>⾃定义弹窗</title><link rel="stylesheet" href="alert.css"></head><body><button>Click me</button><script src="index.js"></script><script>document.querySelector("button").addEventListener("click",()=>{new $Msg({content:"我的⾃定义弹窗好了",type:"success",cancle:function(){let cancle = new $Msg({content:"我是取消后的回调"})},confirm:function(){new $Msg({content:"我是确定后的回调"})}})})</script></body></html>样式部分:也放出来供参考,样式可以根据⾃⼰的设计图⾃⾏更改即可/* 弹出框最外层 */.msg__wrap {position: fixed;top: 50%;left: 50%;z-index: 10;transition: all .3s;transform: translate(-50%, -50%) scale(0, 0);max-width: 50%;background: #fff;box-shadow: 0 0 10px #eee;font-size: 10px;}/* 弹出框头部 */.msg__wrap .msg-header {padding: 10px 10px 0 10px;font-size: 1.8em;}.msg__wrap .msg-header .msg-header-close-button {float: right;cursor: pointer;}/* 弹出框中部 */.msg__wrap .msg-body {padding: 10px 10px 10px 10px;display: flex;}/* 图标 */.msg__wrap .msg-body .msg-body-icon{width: 80px;}.msg__wrap .msg-body .msg-body-icon div{width: 45px;height: 45px;margin: 0 auto;line-height: 45px;color: #fff;border-radius: 50% 50%;font-size: 2em;}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{background: #32a323;text-align: center;}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{ content: "成";}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{background: #ff8080;text-align: center;}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{ content: "误";}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{background: #80b7ff;text-align: center;}.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{content: "注";}/* 内容 */.msg__wrap .msg-body .msg-body-content{min-width: 200px;font-size: 1.5em;word-break: break-all;display: flex;align-items: center;padding-left: 10px;box-sizing: border-box;}/* 弹出框底部 */.msg__wrap .msg-footer {padding: 0 10px 10px 10px;display: flex;flex-direction: row-reverse;}.msg__wrap .msg-footer .msg-footer-btn {width: 50px;height: 30px;border: 0 none;color: #fff;outline: none;font-size: 1em;border-radius: 2px;margin-left: 5px;cursor: pointer;}.msg__wrap .msg-footer .msg-footer-cancel-button{background-color: #ff3b3b;}.msg__wrap .msg-footer .msg-footer-cancel-button:active{background-color: #ff6f6f;}.msg__wrap .msg-footer .msg-footer-confirm-button{background-color: #4896f0;}.msg__wrap .msg-footer .msg-footer-confirm-button:active{background-color: #1d5fac;}/* 遮罩层 */.msg__overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 5;background-color: rgba(0, 0, 0, .4);transition: all .3s;opacity: 0;}CSSJS部分:下⾯是最主要的部分,js⽅法及交互。
js的三种弹出框(alert、confirm、prompt)简单介绍
js的三种弹出框(alert、confirm、prompt)简单介绍1、alert()
alert ⽅法有⼀个参数,就是⽤户想弹出的内容,弹出框很简单,就⼀个显⽰功能。
你可以点击确认关闭这个弹出框。
例如:alert(“hello world!”);
2、confirm()
这个⽅法要求⽤户选择。
有确认有返回。
confirm ⽅法的返回值为 true 或 false。
例如:var flag = confirm(“Are you ok?”);
点击确定,flag的值为true;点击取消则为false;
3、prompt()
这个弹出框相对于上⾯两个弹出框来说,智能化⼜⾼了,你可以直接在这个弹出框⾥⾯回复。
下⾯先上图:
例如:var content = prompt(“How are you?”);
如果你输⼊的是:你好
点击确定之后content的值为:你好。
如果你点击了取消,那么content的值为null。
[js]自定义alert样式
[js]⾃定义alert样式如何更改js的alert样式如:弹出对话框时的背景颜⾊、背景透明等等,下⾯有效果图,感兴趣的朋友可以学习下:window.alert = function(str){var shield = document.createElement("DIV");shield.id = "shield";shield.style.position = "absolute";shield.style.left = "0px";shield.style.top = "0px";shield.style.width = "100%";shield.style.height = document.body.scrollHeight+"px";//弹出对话框时的背景颜⾊shield.style.background = "#fff";shield.style.textAlign = "center";shield.style.zIndex = "25";//背景透明 IE有效//shield.style.filter = "alpha(opacity=0)";var alertFram = document.createElement("DIV");alertFram.id="alertFram";alertFram.style.position = "absolute";alertFram.style.left = "50%";alertFram.style.top = "50%";alertFram.style.marginLeft = "-225px";alertFram.style.marginTop = "-75px";alertFram.style.width = "450px";alertFram.style.height = "150px";alertFram.style.background = "#ff0000";alertFram.style.textAlign = "center";alertFram.style.lineHeight = "150px";alertFram.style.zIndex = "300";strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[⾃定义提⽰]</li>\n";strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n";strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确定\" onclick=\"doOk()\" /></li>\n"; strHtml += "</ul>\n";alertFram.innerHTML = strHtml;document.body.appendChild(alertFram);document.body.appendChild(shield);var ad = setInterval("doAlpha()",5);this.doOk = function(){alertFram.style.display = "none";shield.style.display = "none";}alertFram.focus();document.body.onselectstart = function(){return false;};}效果如图转⾃:。
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
js弹出框、对话框、提⽰框、弹窗实现⽅法总结(推荐)⼀、JS的三种最常见的对话框//====================== JS最常⽤三种弹出对话框 ========================//弹出对话框并输出⼀段提⽰信息function ale() {//弹出⼀个对话框alert("提⽰信息!");}//弹出⼀个询问框,有确定和取消按钮function firm() {//利⽤对话框返回的值(true 或者 false)if (confirm("你确定提交吗?")) {alert("点击了确定");}else {alert("点击了取消");}}//弹出⼀个输⼊框,输⼊⼀段⽂字,可以提交function prom() {var name = prompt("请输⼊您的名字", ""); //将输⼊的内容赋给变量 name ,//这⾥需要注意的是,prompt有两个参数,前⾯是提⽰的话,后⾯是当对话框出来后,在对话框⾥的默认值if (name)//如果返回的有内容{alert("欢迎您:" + name)}}⼆、点击按钮时常⽤的6中提⽰框和操作<!-----------按钮提⽰框----------><input type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););<!-----------按钮提⽰框----------><input type="button" name="btn2" id="btn2" value="提⽰" onclick="javaScript:alert('您确定要删除吗?');<!-----------提交按钮----------><input type="button" value="提交" onclick="javaScript:window.location.href='';"/><!-----------关闭按钮----------><input type="button" value="关闭" onclick="javaScript:window.close();"><!-----------返回并关闭连接----------><a href="#" onclick="javascript:;window.opener.location.reload();window.close()">返回</a>javaScript:window.location.reload();//返回当前页并刷新<!-----------返回上⼀级页⾯----------><input type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"/>三、弹出独⽴窗⼝//关闭,⽗窗⼝弹出对话框,⼦窗⼝直接关闭this.Response.Write("<script language=javascript>window.close();</script>");//关闭,⽗窗⼝和⼦窗⼝都不弹出对话框,直接关闭this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.close();}");this.Response.Write("</script>");//弹出窗⼝刷新当前页⾯width=200 height=200菜单。
二次封装 elementui 的$alert方法 -回复
二次封装elementui 的$alert方法-回复如何二次封装ElementUI 的alert 方法一、介绍在开发Web应用程序时,经常需要使用弹框来提示用户一些信息。
ElementUI是一套基于Vue.js的组件库,提供了丰富的组件和工具,其中包括了一个名为alert的方法用于弹框提示。
但是,为了更好地符合项目需求和提高开发效率,我们可以对其进行二次封装,使得使用更加便捷。
二、分析1. ElementUI的alert方法是基于原生的window.alert进行封装的,功能比较简单,只能弹出一个简单的提示对话框。
而实际项目中可能需要更多的功能,比如自定义样式、自定义按钮等。
2. 通过二次封装,我们可以达到以下目标:- 支持自定义弹框样式- 支持自定义按钮样式和文字- 支持回调函数等三、实现步骤1. 首先,在项目中创建一个新的js文件,命名为alert.js。
在这个文件中,我们将进行二次封装。
2. 在alert.js中,引入ElementUI的alert方法,以便基于它进行二次封装。
javascriptimport { MessageBox } from 'element-ui';3. 接下来,我们定义一个新的方法,比如叫做alert2,用于替代原先的alert方法。
alert2函数的参数可以与alert保持一致,我们不对其进行修改。
javascriptfunction alert2(message, title, options) {MessageBox.alert(message, title, options);}4. 在alert2函数中,我们可以添加一些默认的配置,比如自定义样式或者自定义按钮文字。
这些配置可以通过options参数进行传递。
javascriptfunction alert2(message, title, options) {const defaultOptions = {customClass: 'alert2', 添加自定义样式confirmButtonText: '确定' 修改确认按钮文字};MessageBox.alert(message, title, Object.assign({},defaultOptions, options));}5. 最后,我们需要将新的alert2方法导出,便于在项目中使用。
JavaScript弹出对话框的三种方式
JavaScript弹出对话框的三种⽅式学习过js的⼩伙伴会发现,我们在⼀些实例中⽤到了alert()⽅法、prompt()⽅法、prompt()⽅法,他们都是在屏幕上弹出⼀个对话框,并且在上⾯显⽰括号内的内容,使⽤这种⽅法使得页⾯的交互性更精彩,实际上我们经常会在进⾏⽹页浏览时简单这种类型的对话框,在⽤户与应⽤程序进⾏双向交流时,经常要⽤到对话框。
javascript的三种对话框是通过调⽤window对象的三个⽅法alert(),confirm()和prompt()来获得,可以利⽤这些对话框来完成js 的输⼊和输出,实现与⽤户能进⾏交互的js代码。
今天⼩编就来简单介绍⼀下js中的三种弹出对话框,⼩编先单独对这⼏个⽅法进⾏详细讲解,接着,将这⼏个⽅法进⾏对⽐,好了,开始我们的js之旅吧`(*∩_∩*)′......第⼀种:alert()⽅法alert()⽅法是这三种对话框中最容易使⽤的⼀种,她可以⽤来简单⽽明了地将alert()括号内的⽂本信息显⽰在对话框中,我们将它称为警⽰对话框,要显⽰的信息放置在括号内,该对话框上包含⼀个“确认”按钮,⽤户阅读完所显⽰的信息后,只需单击该按钮就可以关闭对话框。
下⾯来看⼀个使⽤alert()⽅法的例⼦,代码如下所⽰:<html><head><title>编写html页⾯</title><script language="javascript"> //JavaScript脚本标注alert("上联:⼭⽯岩下古⽊枯");//在页⾯上弹出上联alert("下联:⽩⽔泉边少⼥妙");//在页⾯上弹出下联</script></head></html>执⾏上⾯的⼩例⼦,在页⾯上弹出对话框并显⽰⼀句话“上联:⼭⽯岩下古⽊枯”,如下所⽰:接着,单击“确认”按钮后再显⽰第⼆个对话框并显⽰“⽩⽔泉边少⼥妙!”,效果如下;在页⾯上弹出对话框并显⽰⼀句话“上联:⼭⽯岩下古⽊枯”,单击“确认”按钮后再显⽰第2个对话框并显⽰“⽩⽔泉边少⼥妙!”我们来分析⼀下这个⼩例⼦:a、在<script>脚本块中两次调⽤alert()⽅法;b、在每个alert()括号内分别添加了⼀段⽂本信息,运⾏出现如下图所⽰的页⾯,当使⽤⿏标单击页⾯上的“确定”按钮后,出现第⼆个页⾯,再点击“确定”按钮后就关闭页⾯上的对话框。
js中javascript:void(0)用法详解
js中javascript:void(0)⽤法详解javascript:void(0)表⽰不做任何动作。
如:复制代码代码如下:<a href="javascript:void(0);" onclick="alert('ok');"></a>这⾥表⽰这个链接不做跳转动作,执⾏onClick事件。
我想使⽤过ajax的都常见这样的代码:复制代码代码如下:<a href="javascript:doTest2();void(0);">here</a>但这⼉的void(0)究竟是何含义呢?Javascript中void是⼀个操作符,该操作符指定要计算⼀个表达式但是不返回值。
void 操作符⽤法格式如下:1. javascript:void (expression)2. javascript:void expressionexpression 是⼀个要计算的 Javascript 标准的表达式。
表达式外侧的圆括号是选的,但是写上去是⼀个好习惯。
(实现版本 Navigator 3.0 )你以使⽤ void 操作符指定超级链接。
表达式会被计算但是不会当前⽂档处装⼊任何内容。
下⾯的代码创建了⼀个超级链接,当⽤户以后不会发⽣任何事。
当⽤户链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。
复制代码代码如下:<A HREF="javascript:void(0)">单此处什么也不会发⽣</A>下⾯的代码创建了⼀个超级链接,⽤户单时会提交表单。
复制代码代码如下:<A HREF="javascript:void(document.form.submit())">单此处提交表单</A>a href=#与 a href=javascript:void(0) 的区别链接的⼏种办法#包含了⼀个位置信息默认的锚是#top 也就是⽹页的上端⽽javascript:void(0) 仅仅表⽰⼀个死链接这就是为什么有的时候页⾯很长浏览链接明明是#是跳动到了页⾸⽽javascript:void(0) 则不是如此所以调⽤脚本的时候最好⽤void(0)或者<input onclick><div onclick>等链接的⼏种办法1.window.open(''url'')2.⽤⾃定义函数1 2 3 4 5 6 7 8 9 10 11 12<script>function openWin(tag,obj){obj.target="_blank";obj.href = "Web/Substation/Substation.aspx?stationno="+tag; obj.click();}</script><a href="javascript:void(0)"onclick="openWin(3,this)">徐州</a> window.location.href=""总结:1 void(0)⽤于执⾏某些处理,但是不整体刷新页⾯的情况下,但是在需要对页⾯进⾏refresh的情况下,那就要仔细了。
js window的function方法
js window的function方法JS中的window对象是一个全局对象,它提供了许多方法和属性来操作浏览器窗口和文档。
其中之一就是function方法。
window的function方法可以用来定义一个全局函数。
这个函数可以在任何地方调用,而不需要在代码中引用特定的对象。
这个全局函数可以是任何函数,包括匿名函数。
定义一个全局函数的语法如下:```javascriptfunction functionName(parameter1, parameter2, ...){//function code here}```其中,functionName是函数的名称,parameter1, parameter2, ...是函数的参数列表。
例如,定义一个全局函数用于弹出一个警告框:```javascriptfunction showAlert(){window.alert('Hello World!');}```这个函数可以在任何地方调用,如:```javascriptshowAlert();```在调用这个函数时,它将弹出一个警告框,显示“Hello World!”。
除了定义全局函数外,window的function方法还可以用来定义对象的方法。
例如:```javascriptvar myObject = {myMethod: function(){//method code here}};```这个方法可以在对象实例中调用,如:```javascriptmyObject.myMethod();```总之,window的function方法是一个非常有用的工具,可以用来定义全局函数和对象方法,使代码更加灵活和可重用。
$alert 用法
`$alert` 通常在JavaScript 或者某些前端框架(例如AngularJS)中用于显示一个警告或提示消息。
具体用法可能因环境而异,下面我会分别给出几种可能的用法。
### 在JavaScript中在JavaScript中,`alert` 是一个用于弹出一个警告框的函数。
这个函数会显示一个包含指定文本的对话框。
```javascriptalert("这是一个警告框");```### 在AngularJS中在AngularJS中,`$alert` 通常用于创建一个对话框,这个对话框可以包含更复杂的内容和交互。
这是一个简单的例子:```javascriptangular.module('app').controller('MyController',function($scope, $alert) {$scope.showAlert = function() {var alert = $alert({title: '标题',content: '这是内容',container: '#alertContainer',show: true,type: 'info', // 也可以是'success', 'warning', 'danger' 等duration: 1000 // 显示持续时间,单位毫秒});};});```在这个例子中,你需要有一个包含 `id="alertContainer"` 的元素来作为对话框的容器。
你可以使用 `ng-app` 和 `ng-controller` 指令来初始化这个控制器和对应的视图。
注意:这个 `$alert` 服务是来自于 `angular-ui-bootstrap` 库,如果你在使用这个服务,请确保已经正确地引入了这个库。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
function WEBCONFIRM(text,title,DialogBoxID,isOkPostBack,isCancelPostBack)
Байду номын сангаас{
InitDialogBox(text,title,"Web","Confirm",false,false,isOkPostBack,isCancelPostBack,DialogBoxID);
dialogBoxBody += " <tr>";
dialogBoxBody += " <td align='center' width='50px'><img src='" + imageUrl + "'></td>";
dialogBoxBody += " <td>" + text + "</td>";
}
function CONFIRM(text,title,OKMethod,CancelMethod)
{
if(!title) {title = "系统提示";}
InitDialogBox(text,title,"Client","Confirm",OKMethod,CancelMethod,false,false,false);
dialogBoxHead += " <table class='DialogBoxHead' style='filter:alpha(opacity=80);'>";
dialogBoxHead += " <tr>";
dialogBoxHead += " <td align=left> [" + title + "]</td>";
dialogBoxFoot += " <tr>";
dialogBoxFoot += " <td>";
if(Invoke == "Web")
{
dialogBoxFoot += InitWebEventButton(messageType,isOKPostBack,isCancelPostBack,DialogBoxID);
}
else if(Invoke == "Client")
{
dialogBoxFoot += InitClientEventButton(messageType,OKMethod,CancelMethod);
}
}
function WEBALERT(text,title,DialogBoxID,isOkPostBack,messageType)
{
InitDialogBox(text,title,"Web",messageType,false,false,isOkPostBack,false,DialogBoxID);
/**********************************************************************/
isMac = navigator.appVersion.indexOf("Mac") !=-1 ? true : false;
isIE = navigator.appVersion.indexOf("MSIE") !=-1 ? true : false;
hideAllSelect();
DialogBackground = document.createElement("<div id='DialogBackground' style='z-index:"+zindex+";width:100%;height:100%;top:0px;left:0px;position:absolute;background-color:Gray;opacity: 0.2;filter: Alpha(Opacity=20);'></div>");
var WinWidth = document.documentElement.clientWidth;
var WinHeight = document.documentElement.clientHeight;
if( WinWidth ==0 || WinHeight==0)
}
var DialogBox = null;
function InitDialogBox(text,title,Invoke,messageType,OKMethod,CancelMethod,isOKPostBack,isCancelPostBack,DialogBoxID)
{
var imageUrl = GetDialogImageByType(messageType);
obj[i].style.visibility = "visible";
}
/**********************************************************************/
//自己定义alert/confim
/**********************************************************************/
dialogBoxFoot += " </td>";
dialogBoxFoot += " </tr>";
dialogBoxFoot += " </table>";
dialogBoxFoot += "</div>";
DialogBox.innerHTML = dialogBoxHead + dialogBoxBody + dialogBoxFoot;
DialogBackground = null;
}
}
function hideAllSelect(){
var obj = document.getElementsByTagName("SELECT");
for(var i=0;i<obj.length;i++)
document.body.appendChild(DialogBackground);
}
function RemoveBackGroundDiv(){
showAllSelect();
if(DialogBackground != null) {
document.body.removeChild(DialogBackground);
isSafari = ((erAgent.indexOf("Safari")!=-1)&&(isMac)) ? true : false;
/**********************************************************************/
DialogBox = document.createElement("<div id='DialogBox' class='DialogBoxContainer' style='z-index: 20001; width: 360px; height: 120px; position: absolute;'></div>");
dialogBoxHead += " <td align=right><span onclick='closeDialogBox();' style='cursor:hand;font-family:webdings;'>r </span></td>";
dialogBoxHead += " </tr>";
isNS6 = document.getElementById&&!document.all ? true : false;
isNS4 = (yers) ? true : false;
isOPERAMINI = (screen.height == 5000 && screen.availHeight == 5000 ) ? true : false;
dialogBoxHead += " </table>";
dialogBoxHead += "</div>";
dialogBoxBody += "<div>";
dialogBoxBody += " <table class='DialogBoxBody' style='filter:alpha(opacity=90);'>";