javascript弹出层
Javascript弹窗代码大全(收集)
弹窗代码大全(收集)以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面html的<head>区:<script>function openwin(){window.open(”page.html”,”",”width=200,height=200″)}function get_cookie(name){var search = name + “=”var returnvalue = “”;if (documents.cookie.length > 0) {offset = documents.cookie.indexof(search)if (offset != -1) {offset += search.lengthend = documents.cookie.indexof(”;”, offset);if (end == -1)end = documents.cookie.length;returnvalue=”/unescape(documents.cookie.substring(offset,end))”}}return returnvalue;}function loadpopup(){if (get_cookie(’popped’)==”){openwin()documents.cookie=”popped=yes”}}</script>然后,用<body onload=”loadpopup()”>(注意不是openwin而是loadpop啊!)替换主页面中原有的<body>这一句即可。
你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。
真正的pop-only-once!写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
javascript中常见的三种开发模式
javascript中常见的三种开发模式⼀、单例模式: 所谓单例模式,即保证⼀个类只有⼀个实例,并提供⼀个访问它的全局访问点。
<script type="text/javascript">//⼀个类有某个实例,就⽤这个实例,没有的话,就新⽣成⼀个实例var singleTon = (function(){var _instance = null;function Foo(){this.a = "**";this.b = "**";}Foo.prototype.fn = function(){}return {getInstance:function(){if(!_instance){_instance = new Foo();}return _instance;}}})();console.log(singleTon.getInstance()==singleTon.getInstance());</script> 单例模式实现弹出层:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{height: 100px;width: 100px;background: red;}</style></head><body><input type="button" id="btn" value="弹出层"/><script type="text/javascript">(function(){var oBtn = document.getElementById("btn");var _instance = null;//创建弹窗类function PopBox(){this.node = document.createElement("div");document.body.appendChild(this.node);}oBtn.onclick = function(){if(!_instance){_instance = new PopBox;}}})();</script></body></html>⼆、观察者模式: 所谓观察者模式,即(发布-订阅模式):其定义对象间⼀种⼀对多的依赖关系,当⼀个对象的状态发⽣改变时,所有依赖于它的对象都将得到通知。
23个Javascript弹出窗口特效整理
23个Javascript弹出窗口特效整理1. LightviewLightview是一个基于Prototype与开发,用于创建可以覆盖整个页面的模式对话框。
展示的内容不仅可以是图片、文字、网页、通过Ajax 调用的内容,还可以是Quicktime/Flash影片都能够以非常酷的效果展示。
2. ThickBox (演示地址)ThickBox是一个模式对话框UI控件。
基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax 获取的内容。
3. Fonshen JS Window (演示地址)风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。
程序基于JavaScript/X HTML/CSS标准实现。
支持自由度极高的窗口样式定制;交互方面提供模拟的按钮编程模型,可以很好的模拟对话框;另外,接口参考Javascript内置对象window的一些方法(比如:window.open, window.alert, window.confirm),简洁方便。
4. ymPrompt在web开发中,对于浏览器默认的消息提示框(如alert,confirm 等)外观无法控制,为了实现更好的界面效果,于是模拟系统的消息提示框实现了该组件。
在外观上可以通过css进行完全的控制。
调用方式简单,直接使用ymPrompt.alert()的方式调用,传入相应的参数即可。
提供四种消息类型。
分别为消息提示、成功信息、错误信息、询问信息。
5. ModalboxModalBox用于生成Web2.0风格的模式对话框。
基于Prototype 框架开发,效果类似Mac OSX的模式对话框。
内容可以通过Ajax加载或普通的HTML页面。
6. SliderWindowSliderWindow是一个基于YUI开发消息提醒滑动窗体。
7. MOOdalBox (演示地址)MOOdalBox是一个基于Mootools框架开发的Web2.0模式对话。
js弹出窗口总结6种弹窗方法
js弹出窗口总结6种弹窗方法注://关闭,父窗口弹出对话框,子窗口直接关闭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菜单。
菜单栏,工具条,地址栏,状态栏全没有this。
Response。
Write(”<script language=javascript>window.open(’rows。
aspx',’newwindow','width=200,height=200’)</scri pt>”);//弹出窗口刷新当前页面this。
Response.Write("〈script language=javascript〉window。
open('rows。
aspx')</script〉”);this。
Response。
Write(”<script〉window。
open('WebForm2.aspx’,'_blank');</script〉”);//弹出提示窗口跳到webform2。
aspx页(在一个IE窗口中)this。
Response。
Write(" <script language=javascript>alert('注册成功'); window。
js中layer的用法
js中layer的用法一、概述Layer是一种常见的弹层组件,广泛应用于网页开发中。
它提供了简单易用的接口,方便开发者快速创建和管理弹层。
在JavaScript 中,使用Layer组件可以方便地实现弹层的显示、隐藏、关闭等功能。
本文将详细介绍Layer组件的用法,包括基本用法、配置项、事件等。
二、基本用法1. 引入Layer组件:在JavaScript文件中引入Layer组件,可以使用 `<script>` 标签或者通过npm包管理器进行安装。
```javascript// 引入Layer组件import Layer from 'layer';```或者```javascript// 通过CDN引入Layer组件<script src="path/to/layer.min.js"></script>```2. 创建弹层:使用Layer对象的静态方法创建弹层,传入相应的参数即可。
```javascript// 创建弹层示例var layer = new Layer({title: '标题', // 弹层标题content: '内容', // 弹层内容area: ['80%', '80%'], // 弹层显示区域,可以根据需要调整 btn: ['确定', '取消'] // 弹层按钮,可以根据需要添加或修改});```3. 显示弹层:调用Layer对象的`show`方法显示弹层。
```javascriptlayer.open(data); // data为创建弹层时传入的参数对象```4. 隐藏弹层:调用Layer对象的`close`方法隐藏弹层。
```javascriptlayer.close(); // 隐藏当前弹层```5. 关闭所有弹层:调用Layer对象的`closeAll`方法关闭所有弹层。
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 设置对话框窗⼝的⾼度。
JS弹出窗口的各种传值方法
JS弹出窗口的各种传值方法在JavaScript中,弹出窗口是一种常见的用户交互方式。
通过弹出窗口,可以显示其他页面、表单或者提示框等内容。
而传值则是在弹出窗口中传递数据的一种方式,使得弹出窗口可以获取到主页面中的数据,并在弹出窗口中进行操作。
下面将介绍JS弹出窗口的各种传值方法,包括使用URL参数、使用cookie、使用localStorage、使用sessionStorage和使用postMessage 等。
1.使用URL参数:使用URL参数是一种简单的传值方法,可以通过在URL后面添加参数的形式将数据传递给弹出窗口。
例如:```javascriptvar data = 'Hello World!';window.open(url, 'popup', 'width=500,height=500');```在弹出窗口的页面中,可以通过获取URL参数来获取传递的数据:```javascriptvar urlParams = new URLSearchParams(window.location.search);var data = urlParams.get('data');```2. 使用cookie:使用cookie也是一种传值的常见方式。
通过设置cookie,可以将数据保存在用户的浏览器中,然后在弹出窗口中读取cookie来获取数据。
例如:```javascriptdocument.cookie = "data=Hello World!";window.open('popup.html', 'popup', 'width=500,height=500');```在弹出窗口的页面中,可以通过document.cookie来获取cookie的值:```javascriptvar cookieValue = document.cookie.split('; ').find(row => row.startsWith('data=')).split('=')[1];```3. 使用localStorage:localStorage是一种HTML5提供的本地存储方式,可以将数据保存在用户的浏览器中。
js控制div弹出层实现方法
js控制div弹出层实现⽅法本⽂实例讲述了js控制div弹出层实现⽅法。
分享给⼤家供⼤家参考。
具体分析如下:这是个功能很好,且容易调⽤和控制的弹出层。
感兴趣的朋友可以调试运⾏⼀下看看效果如何~O(∩_∩)O~<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出窗⼝(可拖动,背景灰⾊透明)</title><script type="text/javascript"><!--/*FileName:AlertMsg.jstitle:提⽰标题content:提⽰的内容*/document.write("<style type=\"text/css\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")function $(id){ return document.getElementById(id)}function AlertMsg(title,content){var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;con = "<form><table style='margin:10px 15px 15px 15px; border:0;'><tr><th style='border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;'>分类:</th><td style='border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;'><inpu //弹出窗⼝设置msgw = 300; //窗⼝宽度msgh = 150; //窗⼝⾼度msgbg = "#FFF"; //内容背景msgcolor = "#000"; //内容颜⾊bordercolor = "#000"; //边框颜⾊titlecolor = "#FFF"; //标题颜⾊titlebg = "#369"; //标题背景//遮罩背景设置var sWidth,sHeight;sWidth = screen.availWidth;sHeight = document.body.scrollHeight;//创建遮罩背景var maskObj = document.createElement("div");maskObj.setAttribute('id','maskdiv');maskObj.style.position = "absolute";maskObj.style.top = "0";maskObj.style.left = "0";maskObj.style.background = "#777";maskObj.style.filter = "Alpha(opacity=30);";maskObj.style.opacity = "0.3";maskObj.style.width = sWidth + "px";maskObj.style.height = sHeight + "px";maskObj.style.zIndex = "10000";document.body.appendChild(maskObj);//创建弹出窗⼝var msgObj = document.createElement("div")msgObj.setAttribute("id","msgdiv");msgObj.style.position ="absolute";msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";msgObj.style.left = (screen.availWidth - msgw) / 2 + "px";msgObj.style.width = msgw + "px";msgObj.style.height = msgh + "px";msgObj.style.fontSize = "12px";msgObj.style.background = msgbg;msgObj.style.border = "1px solid " + bordercolor;msgObj.style.zIndex = "10001";//创建标题var thObj = document.createElement("div");thObj.setAttribute("id","msgth");thObj.className = "DragAble";thObj.style.cursor = "move";thObj.style.padding = "4px 6px";thObj.style.color = titlecolor;thObj.style.background = titlebg;var titleStr = "<a class='close' title='关闭' style='cursor:pointer' onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";thObj.innerHTML = titleStr;//创建内容var bodyObj = document.createElement("div");bodyObj.setAttribute("id","msgbody");bodyObj.style.padding = "10px";bodyObj.style.lineHeight = "1.5em";bodyObj.innerHTML = con;var txt = document.createTextNode(content)bodyObj.appendChild(txt);//⽣成窗⼝document.body.appendChild(msgObj);$("msgdiv").appendChild(thObj);$("msgdiv").appendChild(bodyObj);}function CloseMsg(){//移除对象document.body.removeChild($("maskdiv"));$("msgdiv").removeChild($("msgth"));$("msgdiv").removeChild($("msgbody"));document.body.removeChild($("msgdiv"));}//拖动窗⼝var ie = document.all;var nn6 = document.getElementById&&!document.all;var isdrag = false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "DragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="DragAble") {isdrag = true;oDragObj = oDragHandle.parentNode;nTY = parseInt(oDragObj.style.top);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left);x = nn6 ? e.clientX : event.clientX;document.onmousemove = moveMouse;return false;}}document.onmousedown = initDrag;document.onmouseup = new Function("isdrag=false");//--></script></head><body><table width="600" border="0" cellspacing="0" cellpadding="0"><tr ><td height="100" align="center" ><p><a href="javascript:AlertMsg("温馨提⽰",'')">点我试试!</a></p> </td></tr></table></div></body></html>希望本⽂所述对⼤家的javascript程序设计有所帮助。
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
JS使⽤遮罩实现点击某区域以外时弹窗的弹出与关闭功能⽰例本⽂实例讲述了JS使⽤遮罩实现点击某区域以外时弹窗的弹出与关闭功能。
分享给⼤家供⼤家参考,具体如下:HTML部分:<div id="div">点击除开div的区域可以弹出弹窗</div><div id="cover"></div><div id="box">点击除开div和弹窗的区域可以关闭弹窗</div>CSS部分:#div{/*设置z-index属性必须设置position:relative或absolute*/position:relative;/*设置div位于遮罩的上⽅*/z-index:2;width:300px;height:200px;border:1px solid grey;}#cover{position:fixed;width:100%;height:100%;left:0;top:0;/*设置遮罩位于div的下⽅*/z-index:1;}#box{border:1px solid grey;/*当弹窗显⽰时,屏幕滚动时,弹窗始终保持位置固定在屏幕正中,不随屏幕滚动⽽变化位置*/position:fixed;width:400px;height:300px;left:50%;top:50%;/*配合left:50%和top:50%属性使得浮出层的中⼼默认在屏幕正中,margin-top为height的⼀半,margin-left为width的⼀半*/margin:-150px 0 0 -200px;/*设置弹窗位于遮罩的上⽅*/z-index:2;/*开始时隐藏弹窗*/display:none;}JavaScript部分:document.getElementById("cover").onclick = function() {if (document.getElementById("box").style.display == "block") {document.getElementById("box").style.display = "none";document.getElementById("cover").style.background = "white";}else {document.getElementById("box").style.display = "block";document.getElementById("cover").style.background = "#aaa";}}更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
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--弹出对话框四种对话框获得用户输入值javascript--弹出对话框四种对话框获得用户输入值让用户点击确定取消。
让用户输入值。
打开指定窗口alert("message") confirm("message") prompt("message") open("url")首先我想先说两句我对javascript的一些看法,我希望大家认真的去学习这门编程语言,因为它给我们在开发网页时,会带来很多的惊喜!javascript一般是运行在客户端的(client),主要用于开发一些网页中的动态效果,其实它的用处还有很多,比如验证表单内容,以及现在比较流行的AJAX应用.今天主要写一下javascript中的弹出对话框:第一种:alert("message")第二种:confirm("message")第三钟:prompt("message")第四种:open("url")第一种alert对话框是一个最简单,也是最常用的一个弹出对话框,通常用于提示信息,对话框包含一个按钮,单击对话框中的按钮将会关闭此对话框.第二种confirm对话框返回的是一个布尔值,该对话框一般用于用户选择,该对话框包含两个按钮,一般一个是"确认",另一个是"取消",比如我们在开发程序的时候,创建一个删除按钮,为了防止用户务操作,一般就会用到这个对话框:"您确定删除吗?"如果选择"确定",执行删除,如果选择"取消",则返回,不做任何操作!第三种prompt对话框,主要用户获取用户输入的信息,比如,弹出一个对话框:<script language="javascript">var name=prompt("你的名字叫什么?");document.write(name);</script>prompt对话框包括两个按钮("确认"和"取消")和一个文本框,文本框用来获取用户输入的信息.第四种其实是一种用对话框的方式打开一个网页,open方法包含很多的参数,主要是用户设置浏览器的显示外观:window.open("Webpage.asp?",Derek,"height=100,width=10 0,status=yes,toolbar=yes,menubar=no,location=no");此语句打开一个新窗口,页面为webpage.asp,参数为var,名字为Derek,高为100,宽为100,显示状态栏和工具条,不显示菜单和地址。
js 调用layer层子界面js的函数
js 调用layer层子界面js的函数在使用Layer 弹出层(一般指layui框架中的弹出层)时,你可以通过Layer 的索引值来获取到弹出层的窗口对象,然后调用其中的子界面(iframe)中的函数。
以下是一般的示例:假设你在Layer 中使用了iframe 弹出层,iframe 的代码如下:```html<!--弹出层中的iframe 页面--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子界面</title></head><body><script>// 子界面中的函数function childFunction() {alert("子界面中的函数被调用了!");}</script></body></html>```然后在主界面中,弹出Layer 弹出层,并调用子界面的函数:```html<!--主界面--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主界面</title><!--引入layui --><link rel="stylesheet" href="path/to/layui/css/layui.css"></head><body><!--主界面中的按钮--><button id="openLayer">打开Layer弹出层</button><script src="path/to/layui/layui.js"></script><script>e('layer', function () {var layer = yer;// 监听按钮点击事件document.getElementById('openLayer').addEventListener('click', function () {// 打开弹出层var index = layer.open({type: 2,content: 'path/to/iframe.html', // 子界面的路径area: ['500px', '300px'],success: function (layero, index) {// 获取iframe 窗口的window 对象var iframeWin = window[layero.find('iframe')[0]['name']];// 调用子界面中的函数iframeWin.childFunction();}});});});</script></body></html>```在这个例子中,点击按钮会弹出一个Layer 弹出层,其中加载了一个iframe 页面。
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制作9种弹出小窗口
用JS制作9种弹出小窗口使用JavaScript可以实现各种类型的弹出小窗口,以下将介绍九种常见的实现方式。
1. `alert`函数弹窗:这是JavaScript中最简单的弹窗函数,通过在脚本中调用`alert("文本内容")`可以在页面中弹出一个带有文本内容的小窗口。
2. `confirm`函数弹窗:通过调用`confirm("文本内容")`函数可以在页面中弹出一个带有文本内容和确定/取消按钮的小窗口。
用户可以选择确定或取消。
3. `prompt`函数弹窗:通过调用`prompt("文本内容","默认值")`函数可以在页面中弹出一个带有文本内容、输入框和确定/取消按钮的小窗口。
用户可以输入内容后点击确定或取消。
4. 自定义样式的弹窗:通过CSS和JavaScript可以自定义弹窗的样式。
可以通过创建一个包含弹窗内部结构的HTML元素,使用CSS设置其样式,然后通过JavaScript控制其显示和隐藏。
5. 第三方插件:也可以使用一些第三方插件或库来实现弹窗功能,例如jQuery UI中的对话框组件、SweetAlert等等。
这些插件通常提供了更多样式和功能选项,可以根据需求来选择。
6. 使用DOM模态框:使用HTML5中的`<dialog>`元素可以创建一个模态框(类似对话框),通过JavaScript可以控制其显示和隐藏。
7. 使用Bootstrap模态框:Bootstrap是一个流行的前端框架,它提供了一个用于创建模态框的组件。
通过引入Bootstrap的样式文件和相关JavaScript文件,可以使用`<div class="modal">`元素创建模态框。
8. 自定义jQuery模态框:使用jQuery可以方便地创建自定义的模态框。
可以通过HTML和CSS创建一个基本的模态框结构,然后使用jQuery控制其显示和隐藏。
JavaScript实现弹出广告功能
JavaScript实现弹出⼴告功能
废话不多说了,直接给⼤家贴代码了,具体代码如下所⽰:
<span style="white-space:pre"> </span>var i=0;//记录次数
var timer;//定时器id
//设置弹出⼴告
onload=function(){
//间隔四秒展⽰⼀次⼴告
timer = setInterval(showAd,4000);
}
//展⽰2秒以后隐藏⼴告的⽅法
function showAd(){
i++;//展⽰的次数加1
//若i等于3清空由setInterval设置的定时器
if(i==3){
clearInterval(timer);
}
//1.获取⼴告
var divObj = document.getElementById("ad");
//2,修改⼴告的样式
divObj.style.display="block";
//两秒之后隐藏
setTimeout(hiddAd,2000);
}
//隐藏⼴告
function hiddAd(){
var divObj = document.getElementById("ad");
divObj.style.display="none";
}
以上所述是⼩编给⼤家介绍的JavaScript实现弹出⼴告功能,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
在此也⾮常感谢⼤家对⽹站的⽀持!。
JavaScript弹出对话框的三种方式
执行上面的小例子,在页面上弹出对话框并显示一句话“上联:山石岩下古木枯”,如下所示:接着,单击“确认”按钮后再显示第二个对话框并显示“白水泉边少女妙!”,效果如下;在页面上弹出对话框并显示一句话“上联:山石岩下古木枯”,单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙!”我们来分析一下这个小例子:a、在<script>脚本块中两次调用alert()方法;b、在每个alert()括号内分别添加了一段文本信息,运行出现如下图所示的页面,当使用鼠标单击页面上的“确定”按钮后,出现第二个页面,再点击“确定”按钮后就关闭页面上的对话框。
注意:两个对话框是分别显示的,而不是一个覆盖另一个,这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。
alert()是js的window对象的一个方法,调用时可以写成window.alert(),也可以写成alert (),功能都是产生一个带确认按钮的对话框,上面显示括号内的信息,第二种:confirm()方法confirm()方法与alert()方法的使用十分类似,不同点是在该种对话框上除了包含一个“确认”按钮外,还有一个“取消”按钮,这种对话框称为确认对话框,在调用window对象的confir显示效果如下:分析一下这个小例子:a、在<script>脚本块中添加confirm()方法、b、在confirm()括号内添加了一段文本信息,运行效果如上图所示,如果用户单击“确认”按钮,则confirm()方法会返回true,如果用户单击“取消”按钮,则confirm()方法会返回false,无论用户选择哪个按钮,都会关闭对话框,而继续执行javascript代码。
单击“确认”或“取消”如果单击页面的确认框上的“确定”按钮后,出现如下图所示的页面:如果单击“取消”按钮,则出现如下图所示的页面:第三种:prompt()方法alert()方法和confirm()方法的使用十分类似,都是仅仅显示已有的信息,但用户不能输入自己的信息,但是prompt()可以做到这点,她不但可以显示信息,而且还提供了一个文本框要求用户使用键盘输入自己的信息,同时她还包含“确认”或“取消”两个按钮,如果用户“确认”按钮,则prompt()方法返回用户在文本框中输入的内容(是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮,则prompt()方法返回null,我们称这种对话框为提示框,在这三种对话框中,她的交互性最好。
javascript中的console.log和弹出窗口alert
javascript中的console.log和弹出窗⼝alert主要是⽅便你调式javascript⽤的。
你可以看到你在页⾯中输出的内容。
相⽐alert他的优点是:1.他能看到结构话的东西,如果是alert,淡出⼀个对象就是[object object],但是console能看到对象的内容。
2.console不会打断你页⾯的操作,如果⽤alert弹出来内容,那么页⾯就死了,但是console输出内容后你页⾯还可以正常操作。
3.onsole⾥⾯的内容⾮常丰富,你可以在控制台输⼊:console,然后就可看到:Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}简单的代码如下:<!DOCTYPE html><html><head><title></title><meta charset="utf-8"><script type="text/javascript">var a=3;var b='这是什么';var $c='啊!';console.log(a,b,$c);var $='jqery';alert($);</script></head><body></body></html>上⾯的代码浏览器中会弹出窗⼝,显⽰jquery字样。
javascript 中的console.log具体⽤法//变量var i = 'I am a string';console.log('变量:',i);//数组var arr = [1,2,3,4,5];console.log('数组:',arr);//对象var obj1 = {key1 : 'value1',key2 : 'value2',key3 : 'value3'};var obj2 = {key6 : 'value4',key5 : 'value5',key4 : 'value6'};var obj3 = {key9 : 'value7',key8 : 'value8',key7 : 'value9'};console.log('对象:',obj1);//对象数组var objArr1 = [obj1,obj2,obj3];var objArr2 = [[obj1],[obj2],[obj3]];console.log('对象数组1:',objArr1);console.log('对象数组1:',objArr2);/*输出:变量:I am a string数组:[1, 2, 3, 4, 5]对象:Object { key1="value1", key2="value2", key3="value3"}对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]] */以上所述是⼩编给⼤家介绍的javascript 中的console.log和弹出窗⼝alert,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
JS控制弹出悬浮窗口(一览画面)的实例代码
JS控制弹出悬浮窗⼝(⼀览画⾯)的实例代码在web项⽬开发中经常遇到在⼀览画⾯中⽤户需要查看某⼀条记录的详细信息。
如果⽤迁移画⾯的⽅式处理,速度会⽐较慢,⽽且⽤户体验不是太好。
如果采⽤点击该条记录的详细链接时弹出⼀个层显⽰在当前画⾯的话,处理速度很快,⽽且⽤户感觉也⽐较新颖。
下⾯我以某个对⽇电⼦商务⽹站为实例说明下它的实现⽅式。
1、jsp页⾯上弹出层的代码<!-- 物流详情弹出页⾯ start --><s:iterator value="lrVo" var="lrVo" id="lrVo" status="st"><div class="logisticscenter_xq" style="display: none;" id='<s:property value="#lrVo.logisticNO"/>'><dl><dt><strong><s:text name="bel.logisticsDetails"/>:</strong></dt><dd><strong class="close_wind">X</strong></dd></dl><div class="information logistics_win"><table width="" border="0" cellspacing="0" cellpadding="0"><tr><td class="r_text"><span class="icon9">*</span><s:text name="bel.logisticsNumber"/>:</td><td></td><td colspan="3" id="logisticNo"><s:property value="#lrVo.logisticNO"/></td></tr><tr><td valign="top" class="r_text"><span class="icon9">*</span><s:text name="bel.distribution"/>:</td><td></td><td colspan="3" style="text-align:left" id="content"><s:property value="#lrVo.content" escape="false"/></td></tr></table></div></div></s:iterator><!--物流详情弹出窗⼝ end-->层样式代码:.logisticscenter_xq{position: absolute;width:710px;border:solid 2px #787878;background: #edfcfe;z-index: 2;}我的处理时将弹出层放置到整个⽹站页⾯的layout.jsp,⽹站中所有页⾯的布局都继承它。
js弹出页面窗口和关闭
js弹出页面窗口和关闭//JS关闭窗口或JS关闭页面的几种代码JS定时自动关闭窗口<script language="javascript"><!--function closewin(){self.opener=null;self.close();}function clock(){i=i-1document.title="本窗口将在"+i+"秒后自动关闭!";if(i>0)setTimeout("clock();",1000);else closewin();}var i=10clock();//--></script>第二种:点击链接没有提示的JS关闭窗口<a href="javascript:self.close()" >关闭窗口</a>第三种:窗口没有提示自动关闭的js代码<script language=javascript><!--this.window.opener = null;window.close();//--></script>IE6-7 JS关闭窗口不提示的方法方法一:js 代码济宁网站制作function CloseWin() //这个不会提示是否关闭浏览器{window.opener=null;//window.opener=top;window.open("","_self");window.close();}方法二:open.htmljs 代码function open_complex_self() {var obj_window = window.open('close.html', '_self'); obj_window.opener = window;obj_window.focus();}close.htmljs 代码window.close();另附://普通带提示关闭function closeie(){window.close();}//关闭IE6不提示function closeie6(){window.opener=null;window.close();}//关闭IE7不提示function closeie7(){window.open('','_top');window.top.close();}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,scr ollbars=no, resizable=no,location=no, status=no')//写成一行--></SCRIPT>脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。
JS弹出对话框实现方法(三种方式)
JS弹出对话框实现⽅法(三种⽅式)本⽂实例讲述了JS弹出对话框实现⽅法。
分享给⼤家供⼤家参考,具体如下:1.警告框<html><head><script type="text/javascript">function disp_alert(){alert("我是警告框!!")}</script></head><body><input type="button" onclick="disp_alert()" value="显⽰警告框" /></body></html>2.确定取消框<html><head><script type="text/javascript">function disp_confirm(){var r=confirm("按下按钮")if (r==true){document.write("您按了确认!")}else{document.write("您按了取消!")}}</script></head><body><input type="button" onclick="disp_confirm()" value="显⽰确认框" /></body></html>3.有输⼊的框<html><head><script type="text/javascript">function disp_prompt(){var name=prompt("请输⼊您的名字","Bill Gates")if (name!=null && name!=""){document.write("你好!" + name + " 今天过得怎么样?")}}</script></head><body><input type="button" onclick="disp_prompt()" value="显⽰提⽰框" /></body></html>希望本⽂所述对⼤家JavaScript程序设计有所帮助。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
需要注意的是,JS脚本中的的大小写最好前后保持一致。
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>
然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
首先,将如下代码加入page.html文件的<head>区:
<script language="JavaScript">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>
然后,再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
如下代码加入主窗口<head>区:
<script language="javascript">
<!--
function openwin() {
window.open("page.html","","width=200,height=200")
}
//-->
</script>
//写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
有解决的办法吗?Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先,将如下代码加入主页面HTML的<HEAD>区:
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>
ห้องสมุดไป่ตู้
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵,现在更加完美了!
【8、内包含的弹出窗口-一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
//写成一行
}
//-->
</script>
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
加入<body>区:
<a href="1.htm" onclick="openwin()">open</a>即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
//写成一行
-->
</SCRIPT>
参数解释:
<SCRIPT LANGUAGE="javascript"> js脚本开始;
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript">
<!--
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')
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
<a href="#" _fcksavedurl=""#"" onclick="openwin()">打开一个窗口</a>
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
【1、最基本的弹出窗口代码】
其实代码非常简单:
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html')
-->
</SCRIPT>
因为这是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。