模态框_模态框传值 - CSDN
精华内容
参与话题
  • 效果图: 点击按钮前的网页样子: 点击按钮后的网页样子: HTML代码: <!DOCTYPE html> <html> <head>...模态框</title> <link rel="stylesheet" type="text...

    效果图:

    点击按钮前的网页样子:

    点击按钮后的网页样子:

    HTML代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    	<title>模态框</title>
    	<link rel="stylesheet" type="text/css" href="modalBox.css">
    </head>
    <body>
        <!-- 触发按钮 -->
        <button id="triggerBtn">模态框</button>
        <!-- 模态框 -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>头部</h2>
                    <span id="closeBtn" class="close">×</span>
                </div>
                <div class="modal-body">
                    <p>这是一个模态框!</p>
                    <p>喜欢就点个赞吧!</p>
                </div>
                <div class="modal-footer">
                    <h3>尾部</h3>
                </div>
            </div>
        </div>
    <script type="text/javascript" src="modalBox.js"></script>
    </body>
    </html>

     CSS代码:

    /*模态框*/
    .modal {
        display: none; /* 默认隐藏 */
        position: fixed; /* 根据浏览器定位 */
        z-index: 1; /* 放在顶部 */
        left: 0;
        top: 0;
        width: 100%; /* 全宽 */
        height: 100%; /* 全高 */
        overflow: auto; /* 允许滚动 */
        background-color: rgba(0,0,0,0.4); /* 背景色 */
    }
    /*模态框内容*/
    .modal-content {
        display: flex; /*采用flexbox布局*/
        flex-direction: column; /*垂直排列*/
        position: relative;
        background-color: #fefefe;
        margin: 15% auto; /*距顶部15% 水平居中*/
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        animation: topDown 0.4s; /*自定义动画,从模态框内容上到下出现*/
    }
    @keyframes topDown {
        from {top: -300px; opacity: 0}
        to {top: 0; opacity: 1}
    }
    /*模态框头部*/
    .modal-header {
        display: flex; /*采用flexbox布局*/
        flex-direction: row; /*水平布局*/
        align-items: center; /*内容垂直居中*/
        justify-content: space-between; 
    }
    /*关闭X 样式*/
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    JS代码:

    (function() {
    	/*建立模态框对象*/
    	var modalBox = {};
    	/*获取模态框*/
    	modalBox.modal = document.getElementById("myModal");
        /*获得trigger按钮*/
    	modalBox.triggerBtn = document.getElementById("triggerBtn");
        /*获得关闭按钮*/
    	modalBox.closeBtn = document.getElementById("closeBtn");
    	/*模态框显示*/
    	modalBox.show = function() {
    		console.log(this.modal);
    		this.modal.style.display = "block";
    	}
    	/*模态框关闭*/
    	modalBox.close = function() {
    		this.modal.style.display = "none";
    	}
    	/*当用户点击模态框内容之外的区域,模态框也会关闭*/
    	modalBox.outsideClick = function() {
    		var modal = this.modal;
    		window.onclick = function(event) {
                if(event.target == modal) {
                	modal.style.display = "none";
                }
    		}
    	}
        /*模态框初始化*/
    	modalBox.init = function() {
    		var that = this;
    		this.triggerBtn.onclick = function() {
                that.show();
    		}
    		this.closeBtn.onclick = function() {
    			that.close();
    		}
    		this.outsideClick();
    	}
    	modalBox.init();
     
    })();

    参考链接:点击按钮弹出模态框实现

    展开全文
  • 关于BootStrap中Modal(模态框)使用心得

    万次阅读 多人点赞 2018-01-04 17:27:49
    关于BootStrap中Modal(模态框)使用心得 一、modal使用: 1.1、登录bootstrap官网,点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的...
    关于BootStrap中Modal(模态框)使用心得

    一、modal使用:

    1.1、登录bootstrap官网,点击下载Bootstrap

    1.2、导入对应的样式文件css

    1.3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的前提是jquery,所以我们要在导入bootstrap.js前面导入jquery.min.js

    对应导入代码:

    <!--导入样式-->
    <link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入bootstrap.js包-->
    <script src="jquery/jquery-3.1.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>

    1.4、从官网找到一个案例使用:

    <h2>创建模态框(Modal)</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                   <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
               </div>
               <div class="modal-body">在这里添加一些文本</div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                   <button type="button" class="btn btn-primary">提交更改</button>
               </div>
           </div><!-- /.modal-content -->
       </div><!-- /.modal -->
    </div>

    二、modal打开:

    2.1、静态打开:通过data属性打开隐藏模态框

    设置按钮button的data-toggle:"modal"(以模态框的形式打开),data-target:"#myModal"(设置为modal的id)

    2.2、动态打开:以jquery代码为例

    $("#myModal").modal({

    remote:"test/test.jsp";//可以填写一个url,会调用jquery load方法加载数据

    backdrop:"static";//指定一个静态背景,当用户点击背景处,modal界面不会消失

    keyboard:true;//当按下esc键时,modal框消失

    })

    remote处可以填写jsp路径或者html路径,用来给modal框注入内容

    2.3、动态打开事件:

    在modal框加载同时,提供几个方法用来控制modal框

    $("#myModal").on("loaded.bs.modal",function{

    //在模态框加载的同时做一些动作

    });

    $("#myModal").on("show.bs.modal",function{

    //在show方法后调用

    });

    $("#myModal").on("shown.bs.modal",function{

    //在模态框完全展示出来做一些动作

    });

    $("#myModal").on("hide.bs.modal",function{

    //hide方法后调用

    });

    $("#myModal").on("hiden.bs.modal",function{

    //监听模态框隐藏事件做一些动作

    });

    2.4、解决remote只加载一次问题:

    我们在使用js动态打开modal框使用remote请求数据,只会加载一次数据,所以我们需要在每次打开modal框钱移除节点数据。

    解决方案:

    $("#myModal").on("hiden.bs.modal",function{

    $(this).removeData("bs.modal");

    });

    2.5、解决事件监听多次:

    第一次打开modal框正常,第二次,第三次,第n次打开就有可能会出现事件监听多次的奇怪问题(尤其是多个modal窗口叠加,出现这种问题的几率更高,我大致判断有可能是组件bug),所以无奈之举的办法,只适合应急使用:就是强行让他只调用监听一次

    int count = 0 ;

    $("#myModal").on("loaded.bs.modal",function{

    if(++count == 1){

    //调用你需要的方法

    }

    //在模态框加载的同时做一些动作

    });


    总结:modal框是个很好用的组件,不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。

    谢谢阅读,感谢对一名初级程序员的支持,只是分享一下自己遇到的问题,供参考!


    联系作者:



    加群交流:


    展开全文
  • 模态框介绍

    2019-06-05 10:10:08
    介绍bootstrap4里面的模态框,它是由Html和Css和Java script结合起来构建而成的,它位于其它文档之上,从中删除删除滚轮事件,从而使模态框中的内容可以实现滚轮事件,模态框常用css样式定位,常用元素固定定位,...

    介绍bootstrap4里面的模态框,它是由Html和Css和Java script结合起来构建而成的,它位于其它文档之上,从中删除删除滚轮事件,从而使模态框中的内容可以实现滚轮事件,模态框常用css样式定位,常用元素固定定位,position:fixed;这个元素未固定,定位于其他定位不一样,这个会随页面滚轮位置发生变化,但设定的距离不变;
    模态框是存在的另外一个页面,后面自带一个遮罩层,把要显示的内容写入模态框内,这个模态框是boostrap4中改变了Css样式,可以在里面嵌套表单,完成提交;
    如下面的代码事例图所示:在这里插入图片描述
    4
    ×
    //这是关闭模态框的关闭标志

    关闭模态框所示,一般模态框中有两个关闭模态框的按钮,模态框右上角一个和模态框左下角一个,用来关闭模态框所添加上去的按钮;
    页面关闭模态框事例图:在这里插入图片描述
    模态框一般都是隐藏起来的,会给模态框加一个隐藏属性,加入一个aria-hidden=
    “true”;给予模态框隐藏的效果,顺带添加一个id,用来显示模态框,在上面写入jQuery代码,实现模态框显示的代码;
    代码事例图:在这里插入图片描述
    这个模态框也自带一个heard标题给予一个类,class=“modal-header”,在元素中假如给我类,就可以实现模态框标题;
    下面也有一些内容框架,模态框由头和身体所组成,模态框框架并不是很复杂,一些形成的类,给予模态框修饰,根据bootstrap4结构所示:
    代码事例所表示如下:
    //模态框框架展示介绍

    这是模态框框架,有标题部分,有内容部分,这样就可以直接往这个框架内,写入css样式代码,写入内容给模态框添加内容,例如:给予一个from表单,用bootstrap4from表单,用from表单来实现新增效果,给from表单加入一个id,实现清空表单的效果,重置表单: $(“#id”)[0].reset(); 有自动清空表单的效果把前面填写的数据清空; Visual Studio中的MVC(model view control)写入代码中,一般会用到这个新增和修改代码框,数据修改和新增一般给予新增和修改模态框,一般使用from表单来给予模态框修饰,修改新增数据,给数据改变; 页面事例图:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190605100915796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1NTYxMw==,size_16,color_FFFFFF,t_70) 简洁介绍模态框: 这是一个新增输的模态框,给予数据新增效果,给予数据新增,里面新增的是常用旅客姓名,根据模态框所显示,里面包含了一些不同的数据,【用户姓名】【移动电话号码】【证件类型】【证件号码】【大客户号】【明珠卡号】【特殊餐食】【电子邮件】【备注】数据等,所有的数据,给予数据新增,给予数据添加; 作者:zc
    展开全文
  • JS实现模态框

    千次阅读 2019-09-27 09:39:33
    实现简单弹出/遮罩层的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出</title> <style> *{ padding: 0; margin:...

    实现简单弹出框/遮罩层的效果。 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>弹出框</title>
    	<style>
    		*{
    			padding: 0;
    			margin:0;
    		}
    		body{
    			width: 100%;
    			height:100%;
    			background: #fff;
    		}
    		.toggleModal{
    			padding: 10px 20px;
    			color: white;
    			background: #409EFF;
    			border:none;
    			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%,-50%);
    		}
    		.mask{
    			position: absolute;
    			top: 0;
    			bottom: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    			background: rgba(0,0,0,0.4);
    			z-index: 100;
    			display: none;
    		}
    		.modal{
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			width: 400px;
    			transform: translate(-50%,-50%);
    			border-radius: 5px;
    			background: #fff;
    			box-shadow: 2px 3px 20px rgba(0,0,0,0.2);
    			z-index: 120;
    			display: none;
    		}
    		.modal .modal-header{
    			height: 50px;
    			border-bottom: 1px solid #f5f5f5;
    			padding: 0 15px;
    		}
    		.modal .modal-header p {
    			line-height: 50px;
    			display: inline-block;
    		}
    		.modal .modal-header .title{	
    			font-size: 18px;
    			color: #333;
    		}
    		.modal .modal-header .close{
    			float: right;
    			font-size: 26px;
    			margin-top: -2px;
    			color: #9C9FA4;
    			cursor: default;
    		}
    		.modal .modal-content{
    			min-height: 100px;
    		}
    		.modal .modal-footer .btn{
    			padding: 0 20px;
    			height: 36px;
    			line-height: 36px;
    			color: white;
    			background: #409EFF;
    			border: none;
    		}
    		.modal .modal-footer{
    			border-top: 1px solid #f5f5f5;
    			padding: 15px;
    			text-align: right;
    
    		}
    		.container::after{
    			content:"";
    			display: block;
    			clear: both;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div>
    			<button class="toggleModal" id="toggleModal">触发遮罩层</button>
    		</div>
    		<div class="modal">
    			<div class="modal-header">
    				<p class="title">这是弹出层的标题</p>
    				<p class="close">×</p>
    			</div>
    			<div class="modal-content">
    				
    			</div>
    			<div class="modal-footer">
    				<button class="close btn">关闭</button>
    			</div>
    		</div>
    		<div class="mask"></div>
    	</div>
    	<script>
    		window.onload = function(){
    			// 获取需要使用到的元素
    			var toggleModal = document.getElementById("toggleModal");
    			var container = document.getElementsByClassName("container")[0];
    			var mask = document.getElementsByClassName("mask")[0];
    			var modal = document.getElementsByClassName("modal")[0];
    			var closes = document.getElementsByClassName("close");
    			toggleModal.onclick = show;
    			closes[0].onclick = close;
    			closes[1].onclick = close;
    			function show(){
    				mask.style.display = "block";
    				modal.style.display = "block";
    			}
    			function close(){
    				mask.style.display = "none";
    				modal.style.display = "none";
    			}
    		}
    	</script>
    </body>
    </html>

    展开全文
  • 推荐几款好用的模态框附带教程

    千次阅读 2016-07-09 10:10:53
    一、layer弹出组件 ...如何安装: 1.下载完毕后把layer文件夹拿出放到你的工程目录下thinkphp请放在指定的公共目录下,...2.layer的弹出引用文件<script src="/1.9.1/jquery.min.js"></script> <script src="layer/lay
  • 19种漂亮的模态窗口效果
  • 模态框的弹出

    千次阅读 2019-06-08 20:08:04
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:VS 与bootstrap 作者:梁英豪 撰写时间:2019年6月8...我就来练习一下模态框的弹出,模态框的弹出对大家来说都不陌生了。 因为在现实的...
  • 前端之好看的模态框

    2020-07-29 14:20:20
    如果你需要输入弹出等信息框,可以参考这几个模态框,这是我整理资料时,觉得好用,分享给大家,希望能够帮到你
  • bootstrap中的模态框(modal,弹出层)

    万次阅读 多人点赞 2016-08-16 14:08:00
    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免...
  • 模态框

    2019-09-09 11:27:03
    一、modal使用 ...1.2、导入对应的样式文件css 1.3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的前提是jquery,所以我们要在导入bootstrap.js前面导jquery.min.js 对应导入代码: ...
  • BootStarp模态框大小尺寸的控制

    万次阅读 2016-08-22 18:34:15
    BootStarp 默认提供了3中,模态框 的宽度。效果如下: 1,默认: 效果: 2,添加class 2 效果 3 添加class 3 效果
  • $('#myModal').modal({  show: true,  backdrop:'static'  })
  • 千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。 开发过程中经常会遇到在一个模态框上弹出另一个模态框, bootstrap.css中 模态框的z-index为1050.modal { ...
  • 1、模态框的初始化 //初始化模态框 $("#model").modal({ //点击背景不关闭 backdrop:"static", //触发键盘esc事件时不关闭 keyboard: false }); 2、模态框 打开前、关闭前事件 //...
  • 模态框(modal)里传值

    万次阅读 2018-06-01 15:48:30
    网上百度如何向模态框里传值,试了好多种方法都不行,n久之后终于成功,特此记录
  • $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
  • 问题:当模态框嵌套模态框时,在弹出第一个模态框时,发现样式乱了 原因:当弹出第一个模态框时,嵌套的模态框也被显示出来了,只是内容不显示,被第一个模态框压下了。 解决:在嵌套的模态框中的第一行加入style=...
  • boostrap中js控制模态框的关闭

    万次阅读 2018-11-23 17:55:31
    setTimeout(function(){  $('#myModal').modal('hide');  $(".modal-backdrop.fade").hide();  // $("#myModal").trigger("click");  },2000)...
  • 修改bootstrap modal模态框的宽度

    万次阅读 2016-08-19 17:26:14
    修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不是modal这个div 而是modal-dialog这个div,代码如下 最后结果如下图所示 哈哈,很简单吧~
  • vue实现模态框的通用写法

    万次阅读 2017-09-18 18:07:27
    在看了element组件的源码后发现,所有模态框其实实现方法都差不多,主要用到了vue在组件化上的双向绑定。代码如下: <!--查看槽点对话框--> <div draggable="true" @drag="mouseDrag" @dragend="mouseDrag
1 2 3 4 5 ... 20
收藏数 36,941
精华内容 14,776
关键字:

模态框