JS 原生控制弹出框注册模块

最新推荐文章于 2022-08-15 19:49:49 发布
最新推荐文章于 2022-08-15 19:49:49 发布
阅读量908 收藏
点赞数
分类专栏： javascript 前端技巧 JavaScript常用技巧 文章标签： div+css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlanZhuHaiHua/article/details/16801773
版权

下文只是一个简单的div+css+js 的弹出demo，但是比较实用也不复杂，扩展性很高；一些绚丽的效果都可以基于这个原型相对来说非常实用。

具体扩展我这不多说了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出提示</title>
<style>
* {margin:0;padding:0;font-size:12px;}
html,body {height:100%;width:100%;}
#content {background:#f8f8f8;padding:30px;height:100%;}
#content a {font-size:30px;color:#369;font-weight:700;}
#alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
#alert h4 span {float:left;}
#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
#alert p {padding:12px 0 0 30px;}
#alert p input {width:120px;margin-left:20px;}
#alert p input.myinp {border:1px solid #ccc;height:16px;}
#alert p input.sub {width:60px;margin-left:30px;}
</style>

</head>

<body>
<div id="content">
<a href="#">HELP</a>
</div>
<div id="alert">
<h4><span>HELP-01</span><span id="close">关闭</span></h4>
<p><label>      新闻滚动，根据时间，最新新闻标题滚动，点击标题弹出页面，显示全部内容，点击右上角 〉〉更多   弹出页面，显示更多新闻标题
</label></p>
<p><label>&nbsp;&nbsp;</label></p>
<p></p>
</div>
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document.getElementById("close");
reg.onclick = function()
{
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";

mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);

document.body.style.overflow = "hidden";
}

mClose.onclick = function()
{
myAlert.style.display = "none";
mybg.style.display = "none";
}
</script>
</body>
</html>
十三浪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现弹窗注册
hyty的博客
09-28 5345
&lt;%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%&gt; 1.CSS隐藏弹窗块 &lt;script language="javascript"&gt; //显示用户注册页面 function Regopen(divID){ getProvince(); ...
注册协议弹出层注册协议弹出层
05-19
弹出层注册协议弹出层注册协议弹出层注册协议弹出层注册协议弹出层
js如何弹出登陆框,注册框等等
大橙子_Change的博客
03-06 3130
方法一：在body中输入如下代码 &lt;div id=win style="display:none; POSITION:absolute; left:50%; top:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; border:1px solid #888; background-color:#ed...
解决JS单击事件设置的弹出模块在点击后闪现消失的问题
喜欢海
01-20 7782
源代码如下（主要就是在onclick事件后面，记得返回一个false）： # html代码部分： button onclick="diago({{ cate.id }});return false;" class="am-btn am-btn-default am-btn-xs am-text-secondary" id="editcate"> a href="">
js弹出登录框
weixin_34245749的博客
05-30 227
今天修改完成了项目中一个密码重置的模块，刚开始开发为了简便 只是为了省事弹出一个DIV在显示用户内容信息的下边， 后来发现随着账户的增多就DIV就会显示到底部，操作起来很不方便于是就进行修改成了： 这样一来操作起来也方便的多。 刚开始在网上进行JS代码查找找到了很多具有相同功能的，但是添加到项目中的效果都不太理想，特别是对于浏览器兼容性的 这个...
js 弹出框showConfirmBox demo
06-14
在JavaScript编程中，"showConfirmBox"通常是指一个自定义的弹出框插件，用于模拟浏览器原生的`alert`、`confirm`和`prompt`功能，提供更丰富的交互和自定义样式。这个插件可能包含多个功能，如显示警告信息、请求...
js实现弹出框
09-13
在JavaScript编程中，"js实现弹出框"是一个常见的需求，主要是为了替代或自定义浏览器内置的`window.alert()`, `window.confirm()`和`window.prompt()`功能。这些原生的弹出框虽然简单易用，但样式固定且交互性有限...
可拖动弹出框插件.zip
07-04
在本例中，我们关注的是一个名为"easydialog.js"的原生弹窗控件，它提供了多种拖动弹出框的特效。 "easydialog.js"是一款轻量级的JavaScript库，专注于创建灵活且易于定制的对话框。它的主要特点包括： 1. **拖动...
漂亮的弹出框
10-11
在JavaScript中，实现弹出框的方式多种多样，包括原生的alert、prompt和confirm函数，以及通过自定义HTML和CSS创建的更复杂的模态对话框。标题“漂亮的弹出框”和描述“非常漂亮的弹出框，已经封装好，直接使用就...
alert和confirm弹出框样式美化.zip
05-28
标题“alert和confirm弹出框样式美化.zip”提示我们这个压缩包包含的是关于如何自定义和美化`alert`和`confirm`弹出框的内容，使它们更加符合网页的整体设计风格。 描述中提到，这个资源可以让我们自定义弹出框的...
JS注册弹框效果
Anoddguy的博客
08-01 1188
效果图 CSS部分 *{ margin: 0px; padding: 0px; } .close{ float: right; background-color: black; color: white; font-weight: bold; padding: 0px 5px; } body{ ...
一个非常好js弹出div
MenBad的博客
07-30 7049
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt;   &lt;title&gt;LIGHTBOX EXAMPLE&lt;/title&gt;   &lt;style&gt;    .black_overlay{ display: none; position: absolute; top: 0%; left: 0
实现原生登录注册和个人中心模块
陌默
04-27 6333
1. 现如图登录注册模块和个人中心模块，登录成功后跳转到个人中心页面；2. 第二次进入自动登录接口地址：登录接口：http://120.27.23.105/user/login请求参数：mobile 手机号  必填 password 密码 必填 注册接口：http://120.27.23.105/user/reg 请求参数：mobile 手机号 必填 password 密码  必...
html中利用js写一个弹出注册框,原生js实现一个弹出框
weixin_42526087的博客
05-31 1694
其实弹出框的实现非常的简单。网上有很多种类的弹出框，比如jquery ui 的dialog colorbox fancybox等。jquery ui的dialog是一个专业的对话框 而colorbox和fancybox则更适用于播放图片。你可以改造这两个box让他们更像一个对话框。不过有时候觉得什么都用jquery很累，一个对话框的好坏其实不是取决于功能有多强大，而是兼容性和界面。我喜欢新浪微博那...
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
原生js——实现网页登录框、遮罩层（弹出层）效果、原页面进行登录
代码小宝宝的博客
02-15 3389
原生js——实现网页登录框、遮罩层效果 1.Demo展示（单击遮罩层、或单击关闭按钮即可实现对元素的移除）： 2 . Html布局（无任何代码）： &amp;amp;lt;body&amp;amp;gt;&amp;amp;lt;/body&amp;amp;gt; &amp;amp;lt;!--应用了js把div节点动态地插入到页面中；--&amp;amp;gt; 以下为：将要在js里嵌入的Html源码(通过innerH
移动前端webapp（html5页面）
十三狼的专栏
08-05 5306
CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。 1 2 3 4 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl.
H5点击及focus效果
十三狼的专栏
07-23 4071
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px } a.react:active, a.react.react-active, label.react:active { background: rgba(0, 0, 0, .1) }
jquery 点击函数切换 toggle() 及其其他实现点击切换
十三狼的专栏
06-03 2125
toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。 返回值 jQuery 参数 fn (Function) : 第奇数次点击时要执行的函数。 fn (Funct
vue 3 手写原生弹出框
最新发布
05-27
Vue 3 是一款流行的 JavaScript 框架，用于构建用户界面和单页面应用程序。手写原生弹出框可以通过 Vue 3 的组件来实现，以下是一个简单的示例： 1. 新建一个名为 "MyAlert" 的 Vue 组件，该组件包含一个 "message" 属性和一个方法 "closeAlert"。 ``` <template> <div class="my-alert" v-show="visible"> <div class="my-alert-mask" @click="closeAlert"></div> <div class="my-alert-content"> <p>{{ message }}</p> <button @click="closeAlert">确定</button> </div> </div> </template> <script> export default { props: { message: { type: String, default: "", }, }, data() { return { visible: true, }; }, methods: { closeAlert() { this.visible = false; }, }, }; </script> <style scoped> .my-alert { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .my-alert-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .my-alert-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; } </style> ``` 2. 在需要弹出框的地方使用该组件，并传递要显示的消息。 ``` <template> <div> <button @click="showAlert">弹出框</button> <my-alert :message="alertMsg" v-if="isShowAlert" @closeAlert="isShowAlert=false"></my-alert> </div> </template> <script> import MyAlert from "./MyAlert.vue"; export default { components: { MyAlert, }, data() { return { isShowAlert: false, alertMsg: "", }; }, methods: { showAlert() { this.isShowAlert = true; this.alertMsg = "这是一个弹出框"; }, }, }; </script> ``` 这样就可以实现一个简单的手写原生弹出框。相比于使用浏览器的原生弹出框，自定义的弹出框更加灵活，并且可以根据需求进行自由扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值