CSS+JS实现登陆弹窗

太过爱你忘了你带给我的痛 2022-03-21 02:20 476阅读 0赞

## **CSS+JS实现登陆弹窗** ##

学习目标：网页登陆弹窗的实现  
主要功能：CSS的display属性

首先，弹出框的实现是使用CSS里面的Display来实现，  
display:none; 不显示  
display:block;显示  
（之前看到有人将display的属性设为Null来实现显示，测试时灵时不灵，对于小白的我来说暂时不确定原因，后续学习到了再说）

设计思路：  
先预设一个div来设计登陆窗口，style属性中display设置为none，等于设计了一个窗口，但是不触发的情况是不显示的，代码如下：

<style> #login{ display:none; position:absolute; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; border:1px solid #888; background-color:#edf; text-align:center" } </style>
    <div id="login">
    <form>
      <p>用户账号：<input type="text" name=""></p>
      <p>用户密码：<input type="password" name=""></p>
      <input type="submit" name="" value="登陆">
      <input type="reset" name="" value="重填">
      <a href="javascript:closelogin()" onclick="closelogin()">关闭</a>//超链接关闭弹窗，通过Href和onclick都可以
       </form></div>

然后设计js部分，login为登陆弹窗，代码如下：

<script>
        /*点击弹出按钮*/    
        function openlogin() {         
        document.getElementById('login').style.display='block';
          };     
         /*超链接关闭登陆弹窗*/    
         function closelogin() { 
         document.getElementById('login').style.display='none';
    }
         </script>

**但是现在还有个问题，如果只是设置弹窗的显示和隐藏，如果弹窗位置有其他元素的话，会重复显示，并且影响按钮或者超链接等问题，于是设计使用分层功能来解决此问题：z-index，将背景设置为比弹窗低一级即可**

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 弹窗实现方法

![0008dc9e0b9c4e8b89f662df5f2020bb.jpeg][] Vue实现弹窗的方法有很多种，这里给出一个简单的示例： 1. 首先，在Vue项目中创

逃离我推掉我的手/ 2023年10月10日 22:46/ 0 赞/ 78 阅读

相关 Python实现定时弹窗提醒

经常用电脑，一坐就是几个小时，总是忘记时间，所以觉得是不是找个定时提醒软件。网上找了还真有还很多，找了一个卫士什么的，装了。到时间以后自动锁屏倒计时。功能不错但是感觉功能

曾经终败给现在/ 2022年12月20日 05:42/ 0 赞/ 297 阅读

相关 uni-app 实现虚拟弹窗

![在这里插入图片描述][20201112113753565.png_pic_center] 1. uni.showToast(OBJECT) 显示消息提示框。 2. u

本是古典何须时尚/ 2022年12月20日 02:59/ 0 赞/ 250 阅读

相关样式集（八）弹窗，规则弹窗，半透明弹窗

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

待我称王封你为后i/ 2022年11月05日 05:27/ 0 赞/ 299 阅读

相关 SweetAlert2网页弹窗---JAVASCRIPT弹窗

一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖中文文档地址:[http://mishengqiang.com/swe

ゞ浴缸里的玫瑰/ 2022年09月04日 14:53/ 0 赞/ 306 阅读

相关 Java 登陆窗体（2）登陆成功弹出mainFrame

package com.homework; import java.awt.Font; import java.awt.Frame; import java.awt.

妖狐艹你老母/ 2022年05月28日 19:58/ 0 赞/ 278 阅读

相关 JS实现图片弹窗

使用JavaScript和CSS实现点击图片缩略图，创建图片弹窗的功能。需要配置HTML页面，JS代码和CSS代码 HTML代码： <body>

阳光穿透心脏的1/2处/ 2022年04月25日 02:20/ 0 赞/ 384 阅读

相关登陆弹窗

js代码 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <

水深无声/ 2022年03月28日 11:14/ 0 赞/ 408 阅读

相关 CSS+JS实现登陆弹窗

CSS+JS实现登陆弹窗学习目标：网页登陆弹窗的实现主要功能：CSS的display属性首先，弹出框的实现是使用CSS里面的Display来实现， dis

太过爱你忘了你带给我的痛/ 2022年03月21日 02:20/ 0 赞/ 477 阅读

相关 vue实现弹窗（配图）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2022年02月28日 10:46/ 0 赞/ 460 阅读