首先在html上定义两个div元素,其中外层div表示模态框外面的覆盖层(overlay layer), 内层的div表示模态框。
<div id="modal-overlay"> <div class="modal-data"> <p>模态框</p> <p>点击<a onclick="overlay()" href="">这里</a>关闭</p> </div> </div>
定义两个div样式
#modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; background-color: #333; opacity: 0.5; /* 背景半透明 */ } /* 模态框样式 */ .modal-data{ width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center; }
最后添加一个控制模态框显示与隐藏的函数
function overlay(){ var e1 = document.getElementById('modal-overlay'); e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible"; }
相关推荐
js 实现模态框
主要介绍了vue+element 模态框表格形式的可编辑表单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
bootstrap模态框+jSignature签字版功能Demo jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上,是利用Flash嵌入的方式实现的签名处理; 在支持的HTML5的浏览器上默认采用...
ModalLayer是一款带多种形式的模态框插件,js网页弹出框代码,支持倒计时、确认对话框、弹窗iframe等。
集成于jquery的一个模态框插件,在本插件中体现出了点击显示模态框,在一个模态框里面还有一个关闭按钮,如果有需求您可以使用第一个模态框,里面有多种加载方式仅供使用!
一个漂亮的弹出层、模态框和对话框
C#MVC模态框增删查改 使用jq bootstrap sqlserver数据库 最简单最基础 前后端分离
jsp页面代码,包含将页面的值(从数据库中查出来的值)传递给模态框,模态框中使用ajax提交修改后的值。此文档不包含java代码,而且是使用struts2框架的
用JS做的模态框,背景页面在下,提示框在前,效果不错,值得拥有.
Jquery模态框.zip
15种bootstrap模态框动画弹出特效 兼容性好 bootstrap
通过boostrap改的登录注册模态框,有ajax验证
弹出一个全屏幕透明的对话框,再在它的基础上弹出模态框 实现全屏幕模态的效果
使用原生原生css,button组件实现,可自定义程度高,可作为模态框、提示框等。界面效果好,适用于移动端网页、小程序的友好提示
Jquery实现模态框,包含对表的修改,删除,详情查看,增加等功能,代码简介,通俗易懂,对该代码原主人表示感谢!
HTML5响应式模态框(模态对话框),响应式设计,自适应分辨率,兼容PC端和移动端,点击按钮弹出模态框动画效果,有关闭按钮。
使用jQuery自定义模态框“最大、最小化”功能,实现模态框拖拽移动位置
百度图片上传插件在bootstrap模态框中按钮失效解决方法!
微信小程序自定义模态框插件资源,自用成功,欢迎下载。
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。