jQuery 模态框

使用原生jQuery编写一个模态框

实际上，模态框就是一个大的div进行绝对定位，遮住本来的页面，使用户无法点击页面
以下粘一个代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入jq --><script src="./jquery-3.3.1.min.js"></script><title>Document</title><script>$(function () {$('.showDialog').click(function () {// 显示模态框，可以fadeIn，slide操作$('.dialog').show(1000)})// 确定按钮的操作$('.submit').click(function () {$('.dialog').fadeToggle(1000);})// 取消按钮的操作$('.cancel').click(function () {$('.dialog').hide(1000)})})</script><style>.dialog {width: 100%;/* vh为可视窗口的单位，100为满 */height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;line-height: 75px;display: none;}.dialog .container {width: 60%;height: 400px;background-color: #fff;margin: calc((100vh - 400px)/2) auto;position: relative;}.dialog .container .dialog_footer {position: absolute;bottom: 0;}.dialog .container .dialog_footer button {position: relative;left: 350px;display: inline-block;width: 50px;bottom: 10px;}</style>
</head><body><button class="showDialog">显示</button><!-- dialog 为遮罩层，即灰色的部分 --><div class="dialog"><!-- 模态框主内容，一下就是你要塞入的内容，即白色的部分 --><div class="container"><div class="dialog_header">模态框的标题</div><div class="dialog_center">这是一个萌萌哒的模态框内容区域</div><div class="dialog_footer"><button class="cancel">取消</button><button class="submit">确定</button></div></div></div></body></html>

注意不要忘记引入jq文件哦

jQuery 模态框相关推荐

JQuery 模态对话框
JQuery 模态  <!DOCTYPE html> <html lang="en"> <h ...
SpringBoot+Thymeleaf+Jquery实现模态框的显示与数据填充
场景实现 Html代码 <div th:fragment="content"><div class="ibox float-e-margins&quo ...
jQuery练习：表单模态框
代码:基于事件冒泡原理和事件委托 <!DOCTYPE html> <html lang="zh-cn"> <head><meta char ...
JQuery模拟boostrap模态框效果
JQuery模拟boostrap模态框效果 1.单个模态框代码案例: <!doctype html> <html> <head> <meta charset= ...
基于JQuery 改造bootstrap模态框拖动功能
看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理. PS:其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.ht ...
jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
ssm中ajax无反应,jquery + bootstrap(模态框romote) + click - ajax + SSM插入数据库没反应...
点击产生模态框,模态框使用remote远程加载.然后在模态框输入数据,ajax传输到后台insert. 但是click动作后模态框消失,数据库没有插入,没有报错,就好像没有执行js的click一样,求 ...
jQuery写简单模态框
css代码 <style type="text/css"> body,div,a,p,span{ margin: ...
模态框之Uncaught Error: Syntax error, unrecognized expression:
网页源码: <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3. ...

jQuery 模态框

jQuery 模态框相关推荐

最新文章

热门文章