JS实现简单的登陆弹框

格式：wps
大小：17.00 KB
文档页数：2

下载文档原格式

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

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';。