jquery-模态框的显示与消失操作

完成的代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;display: none;}.info{position: fixed;background-color: white;width: 400px;height: 300px;left:50%;top: 50%;margin-top:-150px;margin-left:-200px;display: none;}form{width: 80%;height: 40%;/*background-color: yellow;*/margin: 50px auto 0;}</style><!--    js--><script>$(main);function main() {// 绑定事件，当取消的按钮被点击的时候，有一个函数对应$("#btn_cancle").click(dismiss_modal);// 绑定事件，当显示按钮被点击的时候，模态框显示$("#btn_show").click(show_modal);// 让模态框出现function show_modal() {$(".modal").css("display","block");$(".info").css("display", "block");}//让模态框消失function dismiss_modal() {// 目标，点击取消，让模态框消失// 拿到标签对象var $divInfo = $(".info");// 操作标签对象的属性，设置css的display为none$divInfo.css("display","none");$(".modal").css("display","none");}}</script>
</head>
<body><input type="button" value="显示" id="btn_show"><!--遮罩层-->
<div class="modal">1</div><!--信息层-->
<div class="info">
<!--    表单--><form action="">姓名：<input type="text" name="username"> <br><input type="submit" value="提交"><input type="button" value="取消" id="btn_cancle"></form>
</div></body>
</html>

jquery-模态框的显示与消失操作相关推荐

bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不 ...
SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
场景实现 Html代码 <div th:fragment="content"><div class="ibox float-e-margins&quo ...
jQuery 模态框
使用原生jQuery编写一个模态框实际上, 模态框就是一个大的div进行绝对定位,遮住本来的页面,使用户无法点击页面以下粘一个代码 <!DOCTYPE html> <html l ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
Bootstrap模态框居中显示
Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1.打开源码bootstrap.js,在里面找到如下代码: 2.在上述代码段落下面增加居中的代码即可: //使弹出框居中...va ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
bootstrap 模态框弹出就消失了_Bootstrap 弹出框
Bootstrap 弹出框(Popover)插件弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 ...
html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过: ...

jquery-模态框的显示与消失操作

jquery-模态框的显示与消失操作相关推荐

最新文章

热门文章