原生js写的模态框

最新推荐文章于 2022-06-29 23:34:03 发布
最新推荐文章于 2022-06-29 23:34:03 发布
阅读量308 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41555595/article/details/105719364
版权

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
    #pageMask {
        visibility: hidden;    
        position: absolute;
        left: 0px;    
        top: 0px;
        width:100%;
        height:100%;
        text-align: center;
        z-index: 1100;
        background-color: #333; 
        opacity: 0.6;
    }
    #ModalBody{
        background: white;
        width: 50% !important;
        height: 70% !important;
        height: 70% !important;
        position:absolute;
        left: 25%;
        top: 25%;
        z-index: 1101;
        border: 1px solid;
        display: none;
    }
    #closeOrSaveModalBtn{
        position: static;
        margin-top: 5px;
      margin-right: 1%;
      float: right;
        font-size: 14px;
        background: #ccc0;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="content">
        <div id="pageMask"></div>     <!--遮盖层-->
        <button class="showModalBtn" id="showModalBtn">模态框</button>
    </div>
    
    <div id="ModalBody">    <!--模态框-->
       	<div id="responsibilityModel">
       		<div id='rm_title' align="left"><font size="5">负责人信息</font></div>
			<hr/>
			<div style="margin: 10px; " align="left">
				<label for='rm_type' align="left"><font><b>负责人类别</b></font></label><br/>
				<div>
					<select id='rm_type' name="rm_infor" style="width: 100%;">
						<option>1</option>
					</select>
				</div>
				<div>
					<label for='rm_name' align="left"><font><b>负责人姓名</b></font></label><br/>
					<input id='rm_name' type="text" name="rmName" style="width: 100%">
				</div>
				<div>
					<label for='rm_cert_type' align="left"><font><b>证件类型</b></font></label><br/>
					<input id='rm_cert_type' type="text" name="rmCertType" style="width: 100%">
				</div>
				<div>
					<label for='rm_cert_num' align="left"><font><b>证件号码</b></font></label><br/>
					<input id='rm_cert_num' type="text" name="rmCertNum" style="width: 100%">
				</div>
				<div>
					<label for='rm_fixed_telephone' align="left"><font><b>固定电话</b></font></label><br/>
					<input id='rm_fixed_telephone' type="text" name="rmFixedTelephone" style="width: 100%">
				</div>
				<div>
					<label for='rm_mobile_phone' align="left"><font><b>移动电话</b></font></label><br/>
					<input id='rm_mobile_phone' type="text" name="rmMobilePhone" style="width: 100%">
				</div>
				<div>
					<label for='rm_email' align="left"><font><b>电子邮箱</b></font></label><br/>
					<input id='rm_email' type="text" name="rmEmail" style="width: 100%">
				</div>
			</div>
       	</div>
        <div id="closeOrSaveModalBtn">
			<input type="button" id="closeModalBtn" style="display: none;" value="关闭"/>
			<input type="button" id="saveModalBtn" style="display: none;" value="保存"/>
		</div>
		
    </div>
    
    <script>
        window.onload = function(){
            expandIframe();
        }
        function expandIframe(){
            var mask = document.getElementById("pageMask");
            var modal = document.getElementById("ModalBody");
            var closeBtn = document.getElementById("closeModalBtn");
			var saveBtn = document.getElementById("saveModalBtn");
                    var btn = document.getElementById("showModalBtn");
            
            btn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "inline")? "none" : "inline";
				saveBtn.style.display = (saveBtn.style.display == "inline")? "none" : "inline";
              mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
            
            closeBtn.onclick = function(){
                modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "inline")? "none" : "inline";
				saveBtn.style.display = (saveBtn.style.display == "inline")? "none" : "inline";
                mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
            }
			
			saveBtn.onclick = function(){
				modal.style.display = (modal.style.display == "block")? "none" : "block";
                closeBtn.style.display = (closeBtn.style.display == "inline")? "none" : "inline";
				saveBtn.style.display = (saveBtn.style.display == "inline")? "none" : "inline";
                mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";
			}
        }
    </script>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

禁止喧哗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js写简易模态框
q2432315767的博客
08-28 205
简易模态框
js 实现模态框 model.js
09-28
js 实现模态框
原生JS+css3实现bootstrap模态框
08-20
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
原生js实现简单的模态框
Wang1996332的博客
11-10 739
html部分： <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="...
原生js => 实现模态框
weixin_34199335的博客
12-21 293
先看实现的的效果 具体代码如下所示 .html &lt;!-- 模态框 --&gt; &lt;section class="modal"&gt; &lt;div class="modal-info center-self-xy mYBounceInDown"&gt; &lt;div class="modal-t"&gt; &lt;p class="cen
原生js实现简单的模态框示例
10-19
下面小编就为大家带来一篇原生js实现简单的模态框示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Bootstrap 模态框（Modal）插件
12-13
Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件...
modal:一个原生写的简单模态框，支持IE8以上、chrome
05-01
介绍一个原生写的简单模态框，兼容IE8。功能特性1.支持标签属性关闭弹窗。2.支持点击弹窗区域外背景关闭弹窗。3.支持两种打开弹窗动画效果。4.支持ESC快捷键关闭弹窗。5.支持打开多个弹窗。目录结构│ //根目录│ ...
layer.rar 使用js 闭包封装的原生提示模态框
08-23
该工具类为一个使用js 闭包封装的一个提示模态框，使用于不同分辨率的设备包括pc
原生js创建模态框
weixin_39037804的博客
08-21 298
1.效果图如下： 2.代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <styl...
原生html中modal,原生js实现简单的模态框示例
weixin_35225189的博客
06-03 538
html部分：显示大图×　　　　js部分：var btn = document.getElementById('showMax');var mtclose = document.getElementsByClassName('mtclose')[0];var modalBox = document.getElementById('modalBox');btn.addEventListener('c...
原生js封装模态框
客官不爱喝酒的博客
06-29 524
最近需要一个模态框，然后一种是提示类的，一种是确认类型，我就想着再网上找一个然后修改一下，结果找到了，但是不深特别合适，我再次基础上在做了修改，对功能有所增强，纯原生写的，没有任何依赖性，适应性比较强，值copy即可使用。...
拖动盒子.2020/11/25
weixin_50286102的博客
11-25 99
拖动盒子. 盒子坐标：鼠标的坐标减去鼠标在盒子内的坐标， e.pageX - login.offsetLeft <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%;
原生实现响应式模态框
热门推荐
木槿花开
03-16 1万+
下面采用HTML+CSS+JavaScript实现模态框，并采用Flex布局和多媒体查询实现响应式。 一、模态框HTML代码 模态框实现 模态框展示 模态框标题 × HTML+CSS+JS原生实现响应式模态框演示！ 取消 确定 首先定义模态框的overlayer，然后定义模态框的内容包括head
原生html css js（jquery）模态框的实现
LANCE的博客
12-19 1065
原生html css js（jquery）模态框的实现 最近在项目上用原生的html css js(jquery)进行页面的开发 有需求要用用到弹出模态框来实现数据的新增和修改，这东西放在vue、react上都会有ui组件的支持，但苦于项目都不是用框架来开发的，就需要自己手动来写一个模态框。 下面是我的模态框的实现 html <!DOCTYPE html> <html lang=...
用CSS和js实现模态框
wangweiscsdn的博客
11-25 5023
用CSS和JS改变z-index的属性值就可以实现模态框 modal box *{ margin:0px; padding:0px; } 弹框 欢迎你登录 document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面 {
【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal
编程记录，亲测有效
05-22 2557
模态框这东西在很多前端框架里面也是存在的，但是很多前端框架，如Bootstrap，AmazeUI，Jquery对IE6的兼容性极其糟糕，因此如果自己手写一个纯粹javascript无任何插件的的模态框，不仅能够兼容IE6，对其它浏览器很有很大的兼容性，同时，也好改。 一、基本目标 比如如下的模态框，怎么用在纯粹html+css+javascript，在无任何前端插件的情况下实现呢？
利用js写一段拖拽模态框的案例
最新发布
03-27
以下是一段使用原生JavaScript实现拖拽模态框的示例代码： HTML代码： ``` <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Modal Title</h3> <button class="modal-close">x</button> </div> <div class="modal-body"> <p>Modal Content</p> </div> </div> ``` CSS代码： ``` .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); width: 400px; height: 300px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f5f5f5; cursor: move; } .modal-title { margin: 0; } .modal-close { border: none; background-color: transparent; font-size: 20px; font-weight: bold; cursor: pointer; } .modal-body { padding: 10px; } ``` JavaScript代码： ``` var modal = document.querySelector('.modal'); var modalHeader = document.querySelector('.modal-header'); var isDragging = false; var offsetX = 0; var offsetY = 0; modalHeader.addEventListener('mousedown', function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener('mousemove', function(e) { if (isDragging) { modal.style.left = e.pageX - offsetX + 'px'; modal.style.top = e.pageY - offsetY + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); var modalClose = document.querySelector('.modal-close'); modalClose.addEventListener('click', function() { modal.style.display = 'none'; }); ``` 解释： 1. 首先，我们选择模态框和模态框头部，然后定义一个变量isDragging表示是否正在拖拽，以及变量offsetX和offsetY保存鼠标相对于模态框左上角的偏移量。 2. 当鼠标在模态框头部按下时，设置isDragging为true，并计算offsetX和offsetY。 3. 当鼠标在文档中移动时，如果isDragging为true，则根据鼠标位置和偏移量计算模态框的新位置，并将其应用到模态框上。 4. 当鼠标松开时，将isDragging设置为false。 5. 最后，选择模态框关闭按钮，为其添加一个点击事件，当点击时将模态框隐藏。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值