JS实现简单的登陆弹框

合集下载

js实现弹窗效果

js实现弹窗效果本⽂实例为⼤家分享了js实现弹窗效果的具体代码，供⼤家参考，具体内容如下思路：1.创建⼀个按钮，点击弹出弹窗2.建⽴⼀个弹窗页⾯固定定位默认隐藏3.将弹窗内容放在弹窗页⾯的中间4.js将事件绑定按钮，点击后让弹窗页⾯显⽰5.js事件绑定span标签，点击后让弹窗页⾯消失代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>弹窗</title><link href="../css/弹窗.css" type="text/css" rel="stylesheet"></head><body><button id="btn">打开弹窗</button><div id="myModal"><div class="modal"><div class="modal-header"><p>危险警告</p><span class="close">×</span></div><div class="modal-content"><p>您将进⼊⼀个不安全的页⾯</p></div><div class="modal-footer"></div></div><script src="../js/弹窗.js"></script></body></html>CSS:#myModal{display: none;position: fixed;z-index:1;left:0;top:0;width: 100%;height:100%;overflow: auto;background:rgba(0,0,0,0.5);}#myModal .modal{width: 500px;height:300px;position: relative;top:50%;left:50%;margin-top: -150px;margin-left: -250px;animation:animate 1s;}.modal .modal-header{height:50px;background:white;color: #000;line-height:50px;border-bottom: 1px solid #000000;}.modal .modal-header p{display: inline-block;margin:0;position: absolute;left: 20px;}.modal .modal-header .close{position: absolute;right:20px;font-size: 20px;cursor:pointer;}.modal .modal-content{background: white;height:200px;text-align: center;line-height: 200px;}.modal .modal-content p{margin:0;}.modal .modal-footer{position: relative;height:50px;background: white;}/*添加动画*/@keyframes animate{from{top:0;opacity:0}to{top:50%;opacity:1}}js：window.onload=function () {//获取弹窗按钮var btn=document.getElementById("btn");var close=document.getElementsByClassName("close")[0];var myModal=document.getElementById("myModal");//按钮绑定事件btn.onclick=function () {//获取弹窗myModal.style.display="block";}close.onclick=function () {myModal.style.display="none";}//⽤户点击其他地⽅关闭弹窗window.onclick=function (event) {if(event.target ==myModal){myModal.style.display="none";}}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现弹出窗口效果

JavaScript实现弹出窗⼝效果本⽂实例为⼤家分享了JavaScript实现弹出窗⼝的具体代码，供⼤家参考，具体内容如下思路1、总体使⽤两个div，⼀个作为底层展⽰，⼀个做为弹出窗⼝；2、两个窗⼝独⽴进⾏CSS设计，通过display属性进⾏设置现实与隐藏，此处建议使⽤display属性⽽不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间，影响布局；3、在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。

⼀、设置两个div<html><title>弹出窗⼝</title><head><meta charset="UTF-8"></head><body>// 底层div<div id="popLayer"></div>// 弹出层div<div id="popDiv"></div></body></html>⼆、对两个div进⾏独⽴CSS设置，弹出窗⼝display设为none<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}</style></head><body>// 底层div<div id="popLayer"><button onclick="">弹窗</button></div>// 弹出层div<div id="popDiv"><div class="close">// 关闭按钮超链接<a href="" onclick="">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>三、定义并设置弹出按钮和关闭窗⼝函数<script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script>四、将函数设置到onclick事件中<button onclick="popDiv();">弹窗</button><a href="javascript:void(0)" onclick="closePop()">关闭</a>五、设置关闭链接CSS和pop界⾯的其余CSS<style type="text/css">/* 关闭链接样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭链接 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style>六、整体代码<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}/* 关闭按钮样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭按钮 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style></head><body><div id="popLayer"><button onclick="popDiv();">弹窗</button></div><div id="popDiv"><div class="close"><a href="javascript:void(0)" onclick="closePop()">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

九种js弹出对话框的方法总结

九种js弹出对话框的⽅法总结【1、最基本的js弹出对话框窗⼝代码】这是最基本的js弹出对话框，其实代码就⼏句⾮常简单：复制代码代码如下:<script LANGUAGE="javascript"></script>因为这是⼀段javascripts代码，所以它们应该放在<script LANGUAGE="javascript">标签和</script>之间。

是对⼀些版本低的浏览器起作⽤，在这些⽼浏览器中不会将标签中的代码作为⽂本显⽰出来。

要养成这个好习惯啊。

【2、增加属性设置的js弹出对话框代码】下⾯再说⼀说js弹出对话框窗⼝属性的设置。

只要再往上⾯的代码中加⼀点东西就可以了。

我们来定制这个js弹出对话框弹出的窗⼝的外观，尺⼨⼤⼩，弹出的位置以适应该页⾯的具体情况。

复制代码代码如下:View Code<script LANGUAGE="javascript"></script>参数解释：<script LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗⼝的命令；"page.html" 弹出窗⼝的⽂件名；"newwindow" 弹出窗⼝的名字（不是⽂件名），⾮必须，可⽤空""代替；height=100 窗⼝⾼度；width=400 窗⼝宽度；top=0 窗⼝距离屏幕上⽅的象素值；left=0 窗⼝距离屏幕左侧的象素值；toolbar=no 是否显⽰⼯具栏，yes为显⽰；menubar，scrollbars 表⽰菜单栏和滚动栏。

js弹出框的实现方法

js弹出框的实现方法JavaScript弹出框的实现方法JavaScript是一种在网页中增加交互性和动态功能的脚本语言，它可以通过弹出框来与用户进行简单的互动。

在本文中，我将介绍一些常用的JavaScript弹出框的实现方法。

1. 使用alert()函数：alert()函数是JavaScript中最简单的弹出框方法之一。

它可以在网页中显示一个简单的弹出框，其中包含一条文本信息和一个“确定”按钮。

使用alert()函数的方法如下：```javascriptalert("这是一个弹出框的示例");```这将在页面中弹出一个包含指定文本的弹出框。

2. 使用confirm()函数：confirm()函数也是JavaScript中常用的弹出框方法之一。

它可以显示一个带有文本和“确定”、“取消”两个按钮的弹出框，用于确认用户的选择。

使用confirm()函数的方法如下：```javascriptif (confirm("你确定要继续吗？")) {// 用户点击了确定按钮，执行相应的操作} else {// 用户点击了取消按钮，执行相应的操作}```上述代码中，如果用户点击了确定按钮，将执行`if`代码块中的操作；如果用户点击了取消按钮，将执行`else`代码块中的操作。

3. 使用prompt()函数：prompt()函数可以用于显示一个带有文本和一个输入框的弹出框，用于获取用户的输入。

使用prompt()函数的方法如下：```javascriptvar result = prompt("请输入你的姓名：", "默认值");if (result != null) {// 用户点击了确定按钮，获取输入的值并执行相应的操作}```在上述代码中，`prompt()`函数的第一个参数是显示给用户的提示文本，第二个参数是输入框中的默认值。

JS仿照手机端九宫格登录功能实现代码_

JS仿照手机端九宫格登录功能实现代码_ 这篇文章主要介绍了JS仿照手机端九宫格登录功能实现代码的相关资料,需要的伴侣可以参考下最近没有项目做，闲来无事写了一个小demo，特此分享到脚本之家平台，供大家参考下，本文写的不好还请各位大侠见谅！功能及方法规律都说明在代码中。

所以麻烦大家挺直看代码。

效果如下：话不多说挺直上代码：js部分：首先我们先画出两个九宫格，一个用于登录和首次设置滑动密码用法，另个用于再次设置滑动密码，用于与第一次输入的滑动密码进行对比，推断两次密码是否全都第一个九宫格$("#gesturepwd").GesturePasswd({backgroundColor: "#252736", //背景色color: "#FFFFFF", //主要的控件颜色roundRadii: 25, //大圆点的半径pointRadii: 6, //大圆点被选中时显示的圆心的半径space: 30, //大圆点之间的间隙width: 240, //整个组件的宽度height: 240, //整个组件的高度lineColor: "#00aec7", //用户划出线条的颜色zindex: 100 //整个组件的css z-index属性});在用同样的方式画出其次个九宫格///加载其次个function getur() {$("#gesturepsa").GesturePasswd({backgroundColor: "#252736", //背景色color: "#FFFFFF", //主要的控件颜色roundRadii: 25, //大圆点的半径pointRadii: 6, //大圆点被选中时显示的圆心的半径 space: 30, //大圆点之间的间隙width: 240, //整个组件的宽度height: 240, //整个组件的高度lineColor: "#00aec7", //用户划出线条的颜色zindex: 100 //整个组件的css z-index属性});}html部分：divcenterbrbrdiv id="gesturepwd"/divdiv id="gesturepsa" style="display:none"/div/center/div用户登录时通过业务规律层查询数据库，看客户是否设置九宫格密码，假如设置则调用add()方法，未设置则调用upup()方法。

JS实现弹出层效果

JS实现弹出层效果很多时候我们想去某某⽹站⼲点什么的时候，就会让我们先注册登录后才可以访问内容，⽽现在很多⽹站注册登录的时候都会有⼀种遮罩层的效果，就是背景是带有透明度的⿊⾊遮罩，盖满整个⽹站，然后登录框弹出固定在屏幕的居中位置。

那么，今天就练练这个实⽤⽽简单的效果吧。

PS：这个是我学习后练习的demo！⾸先，需要有⼀个按钮来模拟登录：<button id="btnLogin"class="login-btn">登录</button>然后呢，我们想通过点击这个按钮实现这样⼀个效果：从上⾯这张图⽚，我们可以看到，灰⾊背景就是遮罩层，⽽浅蓝⾊的区域就是登陆框位置所在了。

OK，下⾯先看⼀下HTML结构和css样式：<div id="mask"></div> //遮罩层<div id="login"> //登陆框包裹层<div id="loginCon"> //表单内容<div id="close">点击关闭</div> //关闭按钮我是登录框哟！</div></div>这⾥只是将HTML结构拿出来讲⼀下，但是下⾯我们是通过JS来创建它们的，所以这⾥只是为了⽅便我们理解，并不需要放在html⽂件⾥。

CSS样式：#close{background:url(img/close.png) no-repeat;width:30px;height:30px;cursor:pointer;position:absolute;right:5px;top:5px;text-indent:-999em;}#mask{background-color:#ccc;opacity:0.7;filter: alpha(opacity=70);position:absolute;left:0;top:0;z-index:1000;}#login{position:fixed;z-index:1001;}.loginCon{position:relative;width:670px;height:380px;background:lightblue;border:3px solid #333;text-align: center;}css样式中需要注意⼀下z-index属性，因为我们需要让遮罩层盖住除了登录框之外所有的页⾯内容，所以，需要确保登录框的层次最⾼，遮罩层次之，所以⼀般将这两个的z-index属性值设置为⽐较⾼的数值，但遮罩层要⽐登陆框少⼀层。

js实现弹框效果

js实现弹框效果本⽂实例为⼤家分享了js实现弹框效果的具体代码，供⼤家参考，具体内容如下利⽤display来控制弹窗的现实和隐藏<div id="popLayer"></div> <div id="popBox"><div class="close">X</div><div></div></div>js：//点击关闭按钮var close = document.querySelector(".close")close.onclick = function () {console.log("点击")var popBox = document.getElementById("popBox");var popLayer = document.getElementById("popLayer");popBox.style.display = "none";popLayer.style.display = "none";}//需要显⽰时调⽤var popLayer = document.getElementById("popLayer");popBox.style.display = "block";popLayer.style.display = "block";CSS:/* 弹出层 */#popLayer {display: none;background-color: #000;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 10;opacity: 0.6;}/*弹出层*/#popBox {display: none;background-color: #FFFFFF;z-index: 11;width: 220px;height: 300px;position: fixed;top: 0;right: 0;left: 0;bottom: 0;margin: auto;}/*关闭按钮*/#popBox .close {width: 20px;height: 20px;border-radius: 50%;position: absolute;border: 1px solid #fff;color: #fff;text-align: center;line-height: 20px;right: 8px;top: 8px;z-index: 50;}#popBox .close a {text-decoration: none;color: #2D2C3B;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

怎么用js弹出提示框

怎么用js弹出提示框弹出提示框一般有3种1)alert (普通提示框)2)prompt (可输入的提示框)3)confirm (可选择的提示框)下面举个例子:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><button onclick="mal()">第一种:alert</button><button onclick="mpro()">第二种:prompt</button><button onclick="mcon()">第三种:confirm</button><script>function mal(){alert('这是一个普通的提示框');}function mpro(){var val = prompt('这是一个可输入的提示框','这个参数为输入框默认值,可以不填哦');//prompt会把输入框的值返回给你}function mcon(){var boo = confirm('这是一个可选择的提示框,3种提示方式,学会了吗?')//confirm 会返回你选择的选项,然后可以依据选择执行逻辑if(boo){alert('学会了,真聪明');}else{alert('再来一遍吧')}}</script></body></html>。

用JAVASCRIPT制作弹出式窗口

*只是把窗口的位置调整好，使两个窗口不相互覆盖而已，很简单吧!
5、关闭弹出的窗口
<FORM> <INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'> </FORM>
6、定时关闭弹出的窗口
<script language="JavaScript">
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
//*控制弹出窗口t_cookie('popped')==''){
下面重点介绍弹出式窗口的相关知识：
1、最简单的弹出式窗口
<SCRIPT LANGUAGE="javascript"> <!-window.open ('pop1.html') --> </SCRIPT>
2、弹出有样式设置的窗口
<SCRIPT LANGUAGE="javascript"> <!-window.open ('pop2.html', 'popwindow', 'height=200, width=320, t op=0, left=24, toolbar=no, menubar=no, scrollbars=no, resizable= no,location=no, status=no') --> </SCRIPT>

用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控制其显示和隐藏。

JS实现点击登录弹出窗口同时背景色渐变动画效果

本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果。

分享给大家供大家参考，具体如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><STYLE>  #login{   position: relative;   display: none;     top: 20px;     left: 30px;     background-color: #ffffff;     text-align: center;     border: solid 1px;     padding: 10px;     z-index: 1;  }body {background-color: #0099CC;}.STYLE1 {color: #FFFF00}</STYLE><script type="text/javascript">var W = screen.width;//取得屏幕分辨率宽度var H = screen.height;//取得屏幕分辨率高度function M(id){  return document.getElementById(id);//用M()方法代替document.getElementByIdx_x(id)}function MC(t){  return document.createElement(t);//用MC()方法代替document.createElement_x(t) };//判断浏览器是否为IEfunction isIE(){   return (document.all && window.ActiveXObject && !window.opera) ? true : false;}//取得页面的高宽function getBodySize(){  var bodySize = [];  with(document.documentElement) {  bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度  bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度  }  return bodySize;}//创建遮盖层function popCoverDiv(){  if (M("cover_div")) {  //如果存在遮盖层，则让其显示  M("cover_div").style.display = 'block';  } else {  //否则创建遮盖层  var coverDiv = MC('div');  document.body.appendChild(coverDiv);  coverDiv.id = 'cover_div';  with(coverDiv.style) {   position = 'absolute';   background = '#CCCCCC';   left = '0px';   top = '0px';   var bodySize = getBodySize();   width = bodySize[0] + 'px'   height = bodySize[1] + 'px';   zIndex = 0;   if (isIE()) {   filter = "Alpha(Opacity=60)";//IE逆境   } else {   opacity = 0.6;   }  }  }}//让登陆层显示为块function showLogin(){  var login=M("login");  login.style.display = "block";}//设置DIV层的样式function change(){   var login = M("login");   login.style.position = "absolute";   login.style.border = "1px solid #CCCCCC";   login.style.background ="#F6F6F6";   var i=0;   var bodySize = getBodySize();   login.style.left = (bodySize[0]-i*i*4)/2+"px";   login.style.top = (bodySize[1]/2-100-i*i)+"px";   login.style.width =   i*i*4 + "px";   login.style.height = i*i*1.5 + "px";   popChange(i);}//让DIV层大小循环增大function popChange(i){   var login = M("login");   var bodySize = getBodySize();   login.style.left = (bodySize[0]-i*i*4)/2+"px";   login.style.top = (bodySize[1]/2-100-i*i)+"px";   login.style.width =   i*i*4 + "px";   login.style.height = i*i*1.5+ "px";   if(i<=10){      i++;      setTimeout("popChange("+i+")",10);//设置超时10毫秒   }}//打开DIV层function open(){    change();    showLogin();    popCoverDiv()    void(0);//不进行任何操作,如：<a href="#">aaa</a>}//关闭DIV层function close(){     M('login').style.display = 'none';     M("cover_div").style.display = 'none';    void(0);}</script></head><body><br><br><div align="center"><a href="javascript:open();" class="STYLE1">登陆</a></div><div id="login"><span>用户登陆</span>  <div id="panel">  <lable>用户名: </lable><input type="text" size="20" />   <lable>密码: </lable><input type="password" size="20">   <input type="checkbox" /><lable>登陆</lable>  </div>  <input type="button" value="提交" />  <a href="javascript:close();">关闭</a></div></body></html>希望本文所述对大家JavaScript程序设计有所帮助。

js弹出对话框的3种方式

js弹出对话框的3种⽅式js弹出对话框3种⽅式对话框有三种1：只是提醒，不能对脚本产⽣任何改变；2：⼀般⽤于确认，返回true 或者false ，所以可以轻松⽤于if...else...判断3：⼀个带输⼊的对话框，可以返回⽤户填⼊的字符串，常见于某些留⾔本或者论坛输⼊内容那⾥的插⼊UBB格式图⽚下⾯我们分别演⽰：@LANGUAGE="JA V ASCRIPT" CODEPAGE="936"%对话框有三种1：只是提醒，不能对脚本产⽣任何改变；2：⼀般⽤于确认，返回true 或者false ，所以可以轻松⽤于ifelse判断3：⼀个带输⼊的对话框，可以返回⽤户填⼊的字符串，常见于某些留⾔本或者论坛输⼊内容那⾥的插⼊UBB格式图⽚下⾯我们分别演⽰：演⽰⼀：提醒对话框演⽰⼆：确认对话框演⽰三：要求⽤户输⼊，然后给个结果======⾸先我想先说两句我对javascript的⼀些看法，我希望⼤家认真的去学习这门编程语⾔，因为它给我们在开发⽹页时，会带来很多的惊喜！javascript⼀般是运⾏在客户端的(client)，主要⽤于开发⼀些⽹页中的动态效果，其实它的⽤处还有很多，⽐如验证表单内容，以及现在⽐较流⾏的ＡＪＡＸ应⽤．今天主要写⼀下javascript中的弹出对话框：第⼀种：alert("message")第⼆种：confirm("message")第三钟：prompt("message")第四种：open("url")第⼀种alert对话框是⼀个最简单，也是最常⽤的⼀个弹出对话框，通常⽤于提⽰信息，对话框包含⼀个按钮，单击对话框中的按钮将会关闭此对话框．第⼆种confirm对话框返回的是⼀个布尔值，该对话框⼀般⽤于⽤户选择，该对话框包含两个按钮，⼀般⼀个是＂确认＂，另⼀个是＂取消＂,⽐如我们在开发程序的时候，创建⼀个删除按钮，为了防⽌⽤户务操作，⼀般就会⽤到这个对话框：＂您确定删除吗？＂如果选择＂确定＂，执⾏删除，如果选择＂取消＂，则返回，不做任何操作！第三种prompt对话框，主要⽤户获取⽤户输⼊的信息，⽐如，弹出⼀个对话框:prompt对话框包括两个按钮（＂确认＂和＂取消＂）和⼀个⽂本框，⽂本框⽤来获取⽤户输⼊的信息．第四种其实是⼀种⽤对话框的⽅式打开⼀个⽹页,open⽅法包含很多的参数，主要是⽤户设置浏览器的显⽰外观：window.open("Webpage.asp?",Derek,"height=100,width=100,status=yes,toolbar=yes,menubar=no,location=no");此语句打开⼀个新窗⼝，页⾯为webpage.asp，参数为var，名字为Derek，⾼为100，宽为100，显⽰状态栏和⼯具条，不显⽰菜单和地址。

jsp页面实现弹窗的3方法

1.3种方法<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>三种弹出对话框的用法实例</title><script language="javascript">function ale(){//这个基本没有什么说的，就是弹出一个提醒的对话框alert("我敢保证，你现在用的是演示一");}function firm(){//利用对话框返回的值（true 或者 false）if(confirm("你确信要转去天轰穿的博客？")){//如果是true ，那么就把页面转向location.href="";}else{//否则说明下了，赫赫alert("你按了取消，那就是返回false");}}function prom(){var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ，//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值if(name)//如果返回的有内容{alert("欢迎您："+ name)}}</script></head><body><p>对话框有三种</p><p>1：只是提醒，不能对脚本产生任何改变；</p><p>2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 if else判断</p><p>3：一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的插入UBB格式图片</p><p>下面我们分别演示：</p><p>演示一：提醒对话框</p><p><input type="submit" name="Submit" value="提交" onclick="ale()"/></p><p>演示二：确认对话框</p><p><input type="submit" name="Submit2" value="提交" onclick="firm()"/></p><p>演示三：要求用户输入，然后给个结果</p><p><input type="submit" name="Submit3" value="提交" onclick="prom()"/></p></body></html>2.第2种1.//创建了一个由dialog的内容组成的模式对话框.2.//对话框出现之后,当前线程就完全交由出现的模式对话框进行处理.直到窗口关闭.并返回returnValue;3.var value= window.showModalDialog("dialog.htm");在dialog.htm中的代码大概如下:Js代码1.//注为了代码简单,我这里的第三个参数,是false,采用同步传输2.xmlHttp.open("POST","getData.jsp",false);3.xmlHttp.send();4.//将窗体返回值设置为响应的返回文本5.window.returnValue=xmlHttp.responseText;6.xmlHttp.close();7.//关闭窗口.会自动返回returnValue所指定的值8.window.close();这样,在前面代码中的value变量,就会得到xmlHttp.responseText值.关于window.showModalDialog()更详细的用法,楼主可以到网上搜索一下.我这里就不一一阐述了.3.自己写的<div id="dialog"></div><script type="text/javascript">setTimeout(funciton(){//5秒之后隐藏弹出框$("#dialog").hide();},5000);</script>。

JavaScript实现登录窗体

JavaScript实现登录窗体本⽂实例为⼤家分享了JavaScript实现登录窗体的具体代码，供⼤家参考，具体内容如下思路：就是把登陆窗放在界⾯之外，然后通过script内的函数改变到界⾯之内！<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>我的登录窗体</title><style>.loginDiv{/*设置登录框的外观*/border: solid red 3px;border-radius: 10px;width: 350px;height: 250px;background-color: skyblue;/*设置登录框的位置*/position: absolute;top: -300px;}button{/*设置button的样式*/border-radius: 3px;}#closeDiv{/*设置关闭按钮位置*/position: relative;top: -160px;left: 305px;}</style></head><body><a href="javaScript:login()" >登录窗</a><div class="loginDiv" id="loginDiv"><h2 align="center">登录窗⼝</h2><table align="center"><tr><th>⽤户名:</th><th><input type="text"></th></tr><tr><th>密码:</th><th><input type="password"></th></tr><tr><th colspan="2"><button>登录</button>&nbsp<button type="reset">重置</button></th></tr></table><div id="closeDiv"><a href="javaScript:close()" >[关闭]</a></div></div><script>function login() {//获得登录对象let loginDivObj = document.getElementById("loginDiv");loginDivObj.style.top="100px";//设置过渡属性，参⼀：transitionProperty：规定应⽤过渡效果的 CSS 属性的名称。

js实现登陆界面

js实现登陆界⾯代码分享：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>input[type]{border: 1px solid darkorange;background: white;}#button{border: 10px solid orange;width: 200px;box-shadow:0px 4px 5px #666;background: orange;color: white;}</style></head><body><center><div><form><h3>⽤户注册</h3><hr><p>⽤户名:<input type="text" id="name" placeholder="请填写⽤户名" required="required" onblur="name1()" "> <br><span id="tel"></span></p><p>密码:<input id="paswd" type="password" placeholder="请填写密码" onblur="pwd1()" required="required" onfocus="pwd2()"><br> <span id="pw"></span></p><p>确认密码:<input id="paswd2" type="password" placeholder="请确认密码" required="required" onkeyup="validate()" ><br><span id="qpwtx"></span></p><p>邮箱:<input type="email" placeholder="请填写邮箱" required="required"></p><p><input type="checkbox" required="required">我已阅读注册⼿册</p><p><input type="submit" id="button" value="注册"></p></form></div></center></body><script>function name1(){var name=document.getElementById("name").value;if(name.length==""){document.getElementById("tel").innerHTML="⽤户名不能为空"document.getElementById("tel").style.color="red";}else{document.getElementById("tel").innerHTML="√"document.getElementById("tel").style.color="green";}}function pwd2(){document.getElementById("pw").innerHTML="请填写6-12位的密码"document.getElementById("pw").style.color="#999";}function pwd1(){p=document.getElementById("paswd").value;if(p.length>=6&&p.length<=20){document.getElementById("pw").innerHTML="√"document.getElementById("pw").style.color="green";}else{document.getElementById("pw").innerHTML="格式错误,请输⼊6-20位"document.getElementById("pw").style.color="red";}}function validate(){var qpw=document.getElementById("paswd").value;var qpw2=document.getElementById("paswd2").value;if(qpw==qpw2 && p.length>=6&&p.length<=20){document.getElementById("qpwtx").innerHTML="<font color='green'>√</font>";document.getElementById("button").disabled = false;}else {document.getElementById("qpwtx").innerHTML="<font color='red'>两次密码不相同或者格式错误</font>"; document.getElementById("button").disabled = true;}}</script></html>效果截图：。

详解JavaScript实现JS弹窗的三种方式

详解JavaScript实现JS弹窗的三种⽅式⽬录⼀、前⾔⼆、什么是JavaScript，有什么⽤?三、HTML嵌⼊JavaScript的⽅式：第⼀种⽅式：第⼆种⽅式：第三种⽅式：总结⼀、前⾔html和css的学习⼤致完成，我们进⼊重要的JavaScript学习阶段⼆、什么是JavaScript，有什么⽤?Javascript是运⾏在浏览器上的脚本语⾔。

简称JS。

他的出现让原来静态的页⾯动起来了，更加的⽣动。

三、HTML嵌⼊JavaScript的⽅式：第⼀种⽅式：1、要实现的功能:⽤户点击以下按钮，弹出消息框。

2、弹窗JS是⼀门事件驱动型的编程语⾔，依靠事件去驱动，然后执⾏对应的程序。

在JS中有很多事件，其中有⼀个事件叫做:⿏标单击，单词:click。

并且任何事件都会对应⼀个事件句柄叫做:onclick。

【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加⼀个on。

】，⽽事件句柄是以HTML标签的属性存在的。

3、οnclick=js代码"，执⾏原理是什么?页⾯打开的时候，js代码并不会执⾏，只是把这段ss代码注册到按钮的click事件上了。

等这个按钮发⽣click事件之后，注册在onclick后⾯的js代码会被浏览器⾃动调⽤。

4、怎么使⽤JS代码弹出消息框?在JS中有⼀个内置的对象叫做window, 全部⼩写，可以直接拿来使⽤，window代表的是浏览器对象。

window对象有⼀个函数叫做:alert，⽤法是:window.alert("消息");这样就可以弹窗了。

5、window.可以省略下⾯两个等价<input type="button" value="hello" onclick="window.alert('hello world')"/><input type="button" value="hello" onclick="alert('hello world')"/>6、设置多个alert可以⼀直弹窗<input type="button" value="hello" onclick="alert(hello java")alert(hello python')alert('hello javaScript!)"/>JS中的字符串可以使⽤双引号，也可以使⽤单引号。

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菜单。

js实现点击弹窗弹出登录框

js实现点击弹窗弹出登录框本⽂实例为⼤家分享了js实现点击弹窗弹出登录框的具体代码，供⼤家参考，具体内容如下1 图⽚预览2 index.html代码<!DOCTYPE html><html lang="zh"><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>js点击弹窗弹出登录框代码</title></head><body><style>*{margin:0;padding:0;}button, input{outline:none;}button, .login{width:120px;height:42px;background:#f40;color:#fff;border:none;border-radius:6px;display: block;margin:20px auto;cursor: pointer;}.popOutBg{width:100%;height:100%;position: fixed;left:0;top:0;background:rgba(0,0,0,.6);display: none;}.popOut{position:fixed;width:600px;height:300px;top:50%;left:50%;margin-top:-150px;margin-left:-300px;background:#fff;border-radius:8px;overflow: hidden;display: none;}.popOut > span{position: absolute;right:10px;top:0;height:42px;line-height:42px;color:#000;font-size:30px;cursor: pointer;}.popOut table{display: block;margin:42px auto 0;width:520px;}.popOut caption{width:520px;text-align: center;color:#f40;font-size:18px;line-height:42px;}.popOut table tr td{color:#666;padding:6px;font-size:14px;}.popOut table tr td:first-child{text-align: right;}.inp{width:280px;height:30px;line-height:30px;border:1px solid #999;padding:5px 10px;color:#000;font-size:14px;border-radius:6px;}.inp:focus{border-color:#f40;}@keyframes ani{from{transform:translateX(-100%) rotate(-60deg) scale(.5); }50%{transform:translateX(0) rotate(0) scale(1);}90%{transform:translateX(20px) rotate(0) scale(.8);}to{transform:translateX(0) rotate(0) scale(1);}}.ani{ animation:ani .5s ease-in-out;}</style><button type="button">登录</button><div class="popOutBg"></div><div class="popOut"><span title="关闭"> x </span><table><caption>欢迎登录本⽹站</caption><tr><td width="120">⽤户名：</td><td><input type="text" class="inp" placeholder="请输⼊⽤户名" /></td></tr><tr><td>密码：</td><td><input type="password" class="inp" placeholder="请输⼊密码" /></td></tr><tr><td colspan="2"><input type="button" class="login" value="登录" /></td></tr></table></div><script type="text/javascript">function $(param) {if (arguments[1] == true) {return document.querySelectorAll(param);} else {return document.querySelector(param);}}function ani() {$(".popOut").className = "popOut ani";}$("button").onclick = function() {$(".popOut").style.display = "block";ani();$(".popOutBg").style.display = "block";};$(".popOut > span").onclick = function() {$(".popOut").style.display = "none";$(".popOutBg").style.display = "none";};$(".popOutBg").onclick = function() {$(".popOut").style.display = "none";$(".popOutBg").style.display = "none";};</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js弹窗登录效果（源码）--web前端

js弹窗登录效果（源码）--web前端1.JS弹窗登录效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="Webstorm"><meta name="Author" content="奇客艺术"><meta name="keyword" content="关键字"><meta name="description" content="描述"><title>JS弹窗登录效果</title><style type="text/css">*{margin: 0;padding: 0;}a{color: black;text-decoration: none;font-size: 14px;}a:hover{text-decoration: underline}#href{float: right;margin-right: 20px;}#bg{background:rgba(0,0,0,0.5);/*背景颜⾊半透明opacity:0.5*/width:100%;height: 100%;position: fixed;left: 0;top: 0;display: none}#login{width: 600px;height: 350px;background: white;position: fixed;display: none}#login #title{color: white;background: #ff9933;width: 100%;height: 50px;line-height: 50px;font-size: 24px;} #login #title .close{font-size: 24px;color: white;float: right;margin-right: 15px;text-decoration: none}#login p{margin-top: 35px;margin-left: 120px;}#login form p input{width:260px;height:35px;border:1px solid #dddddd;font-size: 18px;}#login form p .text,.psw{background: rgba(250,255,189,1);}#login form p .sub{margin-left: 65px;background: url("images/2017-07-25_123222.png");}</style></head><body><div id="href"><a class="dl" href="javascript:">登录</a> <a href="javascript:">注册</a></div><div id="bg"></div><div id="login"><div id="title">⽤户登录<a class="close" href="javascript:">X</a></div><form action="javascript:" target=""><p>⽤户名：<input type="text" class="text" maxlength="26"></p><p>密 码：<input type="password" class="psw" maxlength="16"/></p><p><input type="submit" class="sub" value=""/></p></form></div><script src="js/jquery-3.2.1.js"></script><script>playauto();//playauto()函数控制弹出框居中显⽰function playauto() {var _width=$(window).width();//获取浏览器窗⼝宽度var _height=$(window).height();//获取⾼度$(" #login").css({left:_width/2-300,top:_height/2-175});//使弹出框居中}//动态改变浏览器窗⼝时执⾏$(window).resize(function () {playauto();//浏览器窗⼝⼤⼩改变，则重新执⾏playauto()函数，使弹出框居中} );$(".dl").click(function () {//点击超链接按钮显⽰bg、login样式playauto();//再次点击登陆按钮时，弹出框仍然处于居中位置$("#bg").show();$("#login").show();})$(".close").click(function () {//点击弹出框上的X按钮隐藏bg、login样式，即关闭弹出框$("#bg").hide();$("#login").hide();});$("#login").mousedown(function(e){var x=e.clientX;//⿏标按下的X坐标var y=e.clientY;//⿏标按下的Y坐标var left=("#login").offset().left;//登陆框距离左边位置var top=("#login").offset().top;//登陆框距离顶部位置var l=x-$left;//点击的坐标点距离弹出框左边的距离var t=y-$top;//点击的坐标点距离弹出框上边的距离$(document).mousemove(function (e) {var nx=e.clientX;var ny=e.clientY;var n_left=nx-l;//动态得到弹出框距离浏览器左边距离var n_top=ny-t;//动态得到弹出框距离浏览器上边距离$(" #login").css({left: n_left,top:n_top});});$(document).mouseup(function () {$(document).unbind("mousemove");//解除⿏标移动事件$(document).unbind("mouseup");})})</script></body></html>2.效果图Processing math: 100%。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Css样式：
html,body {
margin: 0px;padding:0; background:#06C;
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
height: 100%;
width: 100%;
background: #ccc;
filter:Alpha(opacity=30);/*兼容IE8和之前的浏览器*/ opacity:.30;/*兼容IE9 and other 浏览器*/
}
#login {
display:none;
z-index: 1001;
height: 313px;
width: 505px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -180px;
margin-left: -250px;
background-image: url(../images/login_bg.gif);
background-repeat: no-repeat;
}
蓝色为重要的
Javascript：
<script>
function openme(){
document.getElementById('div1').style.display='block'; document.getElementById('login').style.display='block';
}
function closeme(){
document.getElementById('div1').style.display='none'; document.getElementById('login').style.display='none';
}
</script>
Html：
<div id="div1"></div>
<div id="login">
<div id="close"><input type="image" id="cloae_btn" src="images/close.jpg" onclick="closeme()"/></div>
<div id="top">后台登陆</div>
<div id="left">
<p>用户名：</p>
<p>密    码：</p>
</div>
<div id="right">
<form id="form1" name="form1" method="post" action="">
<input type="text" name="uresname" id="uresname" /><br />
<input type="password" name="password" id="password" /><br />
<input type="button" name="btn" id="btn" onclick="closeme()" value=""/>
<span>|   
<input type="checkbox" name="rem" id="rem" />
<label for="rem"></label>
记住密码</span>
</form>
</div>
<div id="foot">DODI教育| 中文Enghish</div>
</div>
<div>
<input name="button" type="button" onClick="openme()" value="登陆" />
</div>
主要思路：二个div（div1,login），一开始二个div的display:none;，div1的背景设为#ccc, 透明度：filter:Alpha(opacity=30);/*兼容IE8和之前的浏览器*/
opacity:.30;/*兼容IE9 and other 浏览器*/。

Css属性：z-index设为1000。

（这值随便大小，但login的z-index要比这个大，才能在他上面显示出来）。

登陆按钮点击时js调用"openme()"，把二个div的display:'block';。