精华内容
下载资源
问答
  • 页面模态框传值

    2017-12-14 14:30:52
    jsp页面代码,包含将页面的值(从数据库中查出来的值)传递给模态框模态框中使用ajax提交修改后的值。此文档不包含java代码,而且是使用struts2框架的
  • 主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 前阵子做到一个需求是要点击某个按钮弹出...首先自己先做好一个模态框的结构,然后给这个结构赋予类名,用一个自定义变量控制这个模态框显示与隐藏 <div v-if='showBox'> <div class='show-parent'>...

    前阵子做到一个需求是要点击某个按钮弹出个模态框,然后点击模态框的时候模态框还在,点击模态框外部任意区域隐藏模态框,我网上找了下关于这方面的博客很少(也可能是我找的方式不对,哈哈)
    首先自己先做好一个模态框的结构,然后给这个结构赋予类名,用一个自定义变量控制这个模态框显示与隐藏

    	<div v-if='showBox'>
    		<div class='show-parent'>
    			<div class="shard">
    	          <div class="show-inner">
    	            <div>申请次数</div>
    	            <div>1天内</div>
    	            <div>7天内</div>
    	          </div>
    	        </div>
    		</div>
    	</div>
    
    	<span class='show' @click='show'></span>
    
    	export default {
    		data() {
    			return {
    				showBox: false
    			}
    		},
    		methods: {
    			show() {
    				// 点击的时候显示模态框
    				this.showBox = true	
    			},
    			// 在这里在定义个方法用来监听页面的click事件
    			hideBox() {
    				document.addEventListener('click', (e) => {
    						// 如果当前点击的这个对象是这个模态框的话
    					if((e.target).closest('.show-parent')) {
    					//  那么这个模态框还是显示的
    						this.showBox = true
    					} else if(!(e.target).closest('.show')) {
    					// 如果当前点击的这个对象是这个show按钮以外的对象,那么这个模态框就隐藏
    						this.showBox = false
    					}
    				})
    			}	
    		},
    		mounted() {
    			// 页面加载的时候调用监听
    			this.hideBox()
    		}
    	}
    
    
    展开全文
  • 我的问题是,需要刷新页面,再点击模态框按钮才会显示模态框,否则,点击按钮只会弹出模态框背景,模态框显示。 在加载ftl页面时添加了一个刷新页面的方法: $(document).ready(function () { if(location.href....

    点击按钮显示模态框,只显示模态框背景

    我的问题是,需要刷新页面,再点击模态框按钮才会显示模态框,否则,点击按钮只会弹出模态框背景,模态框未显示。

    在加载ftl页面时添加了一个刷新页面的方法:

    $(document).ready(function () {
            if(location.href.indexOf("#reloaded")==-1){
                location.href=location.href+"#reloaded";
                location.reload();
            }
        })
    

    自动刷新一次后就生效了,不过没从根本问题。

    展开全文
  • 前端的组件都是由业务和交互场景来驱动,模态框也不例外,常见的场景便是进行某个操作,如点击按钮,然后显示一个模态框,反馈给用户或引导用户去执行接下来的交互。一个模态框的交互可能会包含
  • Foundation 模态框

    2020-12-13 21:47:22
    模态框是一个显示页面头部的弹窗。 我们可以在容器元素上(如 <div id="myModal")使用唯一 ID,并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性...
  • Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在...您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不
  • 以下实例用于创建多层模态框的嵌套效果: 1.下载用于生产环境的Bootstrap (网址:https://v3.bootcss.com/getting-started/#download) 2.在页面内head标签内引入样式库bootstrap.min.css 3.在页面内body标签尾部引入...

    以下实例用于创建多层模态框的嵌套效果:

    1.下载用于生产环境的Bootstrap (网址:https://v3.bootcss.com/getting-started/#download)

    2.在页面内head标签内引入样式库bootstrap.min.css

    3.在页面内body标签尾部引入任意一jq库和bootstrap.min.js,

    例如:

    <head>
    		<meta charset="UTF-8">
    		<title>模态框</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
    	<!--引入js-->
    	<script  src="js/jquery-3.1.1.min.js"></script>
    	<script  src="js/bootstrap.min.js"></script>
    </body>
    

    实现多层模态框嵌套效果代码如下:

    <!--toggle展示与隐藏    data-toggle="dropdown" 让dropdown展示与隐藏-->
    		 <!--data-target=".."    点击显示...-->
    		 <!--data-dismiss=".."   点击关闭...-->
    <!-- 按钮:用于打开模态框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#box">
      点击打开模态框
    </button>
     
    <!--父框-->
    <div class="modal fade" id="box">
      <!--模态框-->
      <div class="modal-dialog">
        <!--内容-->
        <div class="modal-content">
     
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">模态框头部</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
     
          <!-- 模态框主体 -->
          <div class="modal-body">
           <!-- 点击文字打开子模态框 -->
             <a
                  data-toggle="modal"
                   data-target="#linmit_agreeon"
                   >点击打开相关协议</a
                 >
          </div>
     
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
    
        </div>
      </div>
    </div>
    
    <!-- 子模态框-->
    <div
      class="modal fade"
      id="linmit_agreeon"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
    	<div class="modal-dialog modal-lg" role="document">
    		 <div class="modal-content">
    		   <div class="modal-header">
    			     <div class="">
    			       1111111111111111111111111111111
    			     </div>
    			     <div class="footbtns">
    				       <button
    				         type="button"
    				         data-dismiss="modal"
    				       >
    				         关闭
    				       </button>
    			     </div>
    		   </div>
    		 </div>
    	</div>
    </div>
    

    效果:多层模态框,点击关闭按钮关闭相关模态框

    展开全文
  • 1. 我之前是实现点击表格里某行一个a标签(租借),然后弹出模态框,并将表格这一行的内容显示模态框中。 我的表格 1.1 table: <table class="table table-hover"> <caption style="font-size:20px">...

    1. 我之前是实现点击表格里某行一个a标签(租借),然后弹出模态框,并将表格这一行的内容显示在模态框中。

    我的表格
    1

    1.1 table:

    <table class="table table-hover">
    	<caption style="font-size:20px">车辆信息</caption>
    	<thead>
    		<tr>
    			<th style="text-align:center">车辆编号</th>
    			<th style="text-align:center">车辆图片</th>
    			<th style="text-align:center">车辆名称</th>
    			<th style="text-align:center">车牌号</th>
    			<th style="text-align:center">价格(元/天)</th>
    			<th style="text-align:center">状态</th>
    			<th style="text-align:center">操作</th>
    		</tr>
    	</thead>
    	<tbody>
    		<c:forEach items="${cars}" var="row">
    		<tr>
    			<td align="center">${row.carId}</td>
    			<td align="center"><input type="image" src="/upload/${row.carImg}" style="width:150px"/></td>
    			<td align="center">${row.carName}</td>
    			<td align="center">${row.carNum}</td>
    			<td align="center">${row.carPrice}</td>
    			<td align="center">${row.carState}</td>
    			<td align="center"><a id="rent" href="#"  data-toggle="modal" data-target="#myModal2" >租借</a></td>
    		</tr>
    		</c:forEach>
    	</tbody>
    </table>
    

    data-toggle=“modal” data-target="#myModal" 表示点击a标签触发模态框(modal),触发的模态框id为myModal2。

    1.2 模态框:(修改自bootstrap的模态框demo)

    <!-- 模态框(Modal) 租借-->
    <div class="modal fade" id="myModal2" 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">×
    				</button>
    				<h4 class="modal-title" id="myModalLabel">
    					Rent the car
    				</h4>
    			</div>
    			<form action="rentCar" method="post"onsubmit="return check();">
    			<div class="modal-body">
    				<table class="table table-striped">
    					<tr>
    						<td>车辆编号</td>
    						<td><input type="text"  id="cId" name="cId" class="form-control" readonly/></td>
    					</tr>
    					<tr>
    						<td>价格(元/天)</td>
    						<td><input type="text"  id="carPrice" name="carPrice" class="form-control" readonly/></td>
    					</tr>
    					<tr>
    						<td>租借天数</td>
    						<td><input type="text" id="rDay" name="rDay"class="form-control"onchange="getPrice()"></td>
    					</tr>
    					<tr>
    						<td>应付金额</td>
    						<td><input type="text" id="rPrice" name="rPrice"class="form-control" readonly></td>
    					</tr>
    				</table>	
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-default" 
    						data-dismiss="modal">取消
    				</button>
    				<input type="submit" value="确认支付" class="btn btn-primary">
    			</div>
    			</form>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    

    1.3 通过js,实现模态框显示时,获取点击a标签所在行的数据,并显示在模态框的组件里。

    $('#myModal2').on('show.bs.modal', function (event) {
            $("textarea[name = refuseTextareaContext]").innerHTML = "";
            var btnThis = $(event.relatedTarget); //触发事件的按钮
            var modal = $(this);  //当前模态框
            var modalId = btnThis.data('id');   //解析出data-id的内容
            currentDataId = btnThis.closest('tr').find('td').eq(0).text();//获取a标签所在行的某一列的内容,eq括号里面的数值表示列数
            $("#cId").val(currentDataId);设置模态框里id为cId的组件的值为currentDataId
            currentDataPrice = btnThis.closest('tr').find('td').eq(4).text();
            $("#carPrice").val(currentDataPrice);
        });       
    

    这样就能实现点击弹出模态框,获取表格的信息并显示。

    2. 然后我想实现的是点击a标签后,判断是否显示模态框,再获取所在行的信息并显示在模态框里。

    2.1 修改a标签,使a标签点击执行check1方法,if。。。就不显示模态框,else显示模态框。

    a标签:(去掉对模态框的触发)

    <a id="rent" href="#"  onclick="check1()" >租借</a>
    

    check1:

    function check1(){
        	var test="${cusSession}";
        	if(test==""){
        	alert("您还没有登录,请登录哦!");
        }
        	else{
        		var rent=document.getElementById("rent");获取a标签
        		rent.dataset.toggle="modal";/js中触发模态框的设置
        		rent.dataset.target="#myModal2"
        	}
     	}
    

    我尝试过在else里输入$(‘#myModal2).modal(‘show’);这样可以实现模态框的显示,但是之前写的模态框显示后执行的事件就不起作用了,模态框里无法显示值。

    2.2 其余的都不用修改,这样就ok了。

    此时是已登录状态,cusSession不等于null,点击租借可以显示模态框,并将这一行的信息显示在模态框里
    2
    未登录状态,点击租借的结果
    3

    展开全文
  • hidden.bs.modal,当模态框完全对用户隐藏时触发。 $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.modal',function(){ var ...
  • 1、当一个页面中只存在一个模态框时,大家可以使用菜鸟教程中的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框(Modal)插件</...
  • Bootstrap显示下拉框和模态框 一、Demo描述 ​ 医生可以通过下拉框,给学生问题添加标签。若标签不存在,则可以自己创建标签。创建成功后,会自动刷新页面。 二、Bootstrap显示下拉框 1、如何使用 Ⅰ、设置按钮组 &...
  • 在网站设计中经常会遇到页面嵌套,有什么好处。 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用...然而有个问题,就是子页面模态框只在子页面显示。 那么如何将子页面bootstrap4模...
  • 选中页面一条数据在模态框显示

    千次阅读 2019-08-16 15:34:02
    查询数据库数据显示页面,这是非常常用的,也能算是非常基础的操作,查询出来后,我在页面的每一条数据后拼接了一个打开模态框的按钮,而我要实现选中页面的一条数据在模态框里也显示选中的那一条数据。...
  • Bootstrap模态框导致页面抖动 简单介绍Bootstrap模态框模态框(Modal)是覆盖在父窗体上的子窗体。 通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。 子窗体可提供信息、...
  • 首先说一下,多个模态框在同一页面是完全可以正常显示的,下面说几个注意事项。 使用触发器或使用js .modal(“show”) 来触发模态框 这个就要注意了,每个模态框的id注意不要一样。 <div></div> 注意是不是一一匹配...
  • Form表单中BootStrap模态框显示(只显示遮罩层或闪一下...最后找出原因是因为我的页面都是放在一个Form表单中的,所以当模态框放在表单中时一定要在form标签中加上 onsubmit=“return false” 来防止点击表单中的b...
  • 这就是图片模态框效果。 这个效果可以使用某些js库实现,如bpopupJs。但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法。 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭...
  • 模态框消失显示事件

    2020-09-01 12:00:22
    隐藏模态框 ...显示模态框 $("#modal").modal("show") 模态框弹出事件 $('#myModal1').on('show.bs.modal', function () { }); 模态框消失事件 $('#myModal1').on('hide.bs.modal', function () { });
  • 而事实是我中间那块完全可以全部显示模态框来,多出个滚动条很不方便。 F12一看 发现上下左右的边距都很大。 距离上边距160px; 问题可以解决了,将上边距减小,并让滚动条隐藏(这是bootstrap的css样式,...
  • 集成activiti,怎样在模态框显示流程设计器的静态页面
  • 我在两个页面中都使用了双模态框显示方法,但是其中一个模态框实现正常,另一个页面中较小的模态框却被大模态框覆盖了,两个页面对比了一下发现样式什么的都是一模一样,唯一不一样的就是两个模态框页面中的放置...
  • 模态框页面

    2019-04-16 07:54:19
    开发工具与关键技术:Visual Studio / 模态框页面层 作者:郑名方 撰写时间:2019年4月15日 Layui弹出层它是一个页面,所以要新增一个视图。Layui的弹出层它是一块代码,它Modle不一样它就是一块代码,只不过隐藏...
  • 刚开始以为是z-index的原因,去找了笼罩层.modal-backdrop ...因为我把模态框放到了含有fixed-top的类里 可能这两个有冲突 这个本来是想给navbar固定顶部,然后放到父一级了,现在把它放到navbar里就ok了 ...
  • body.modal-open { overflow-y: auto !important; padding-right: 0 !important;//解决了右边框每次加17px问题 }
  • 问题描述:第一个模态框可以正常弹出,第二个模态框显示阴影,无弹出。 解决办法:在两个模态框的代码外分别包裹div。 如图所示,这是一个修改教师信息的弹出框,模态框的具体代码被我折叠了,大家看包裹的...
  • Bootstrap中双重模态框显示解决方案

    千次阅读 2018-08-03 09:07:28
    问题:在调用bootstrap的模态框后,触发模态框上的一个事件,再在本模态框上再跳出一个模态框。 方法: 个人开发中遇到的多重模态框的问题,...在多重模态框的的当前页面加上两个代码片段 $(document).on('sho...
  • 如何为Web页面设置一个模态框

    千次阅读 2018-06-10 16:17:39
    在Web项目中,模态框因其灵活,简易而被广泛应用,例如添加修改数据、登录操作等等,常常不会选择添加一个新页面来进行操作,而是在当前页面弹出一个模态框来填写数据。下面是一个模态框的代码,使用时可以直接套用...
  • modal的显示和其他控件略有不同,其不能使用show方法显示,而是需要其自带的modal方法来显示...点击modal方法,模态框正常显示 点击show按钮,不仅不能显示,而且点击之后,页面出现卡死现象,modal按钮也不能按了
  • 2.点击弹框显示事件中,地图加载延时。 例: function addMap(){  //地图加载方法 } function showModal(){  setTimeout(function(){  addMap(); },1000) } vue 中 this.$nextTick(function () { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,917
精华内容 5,566
关键字:

显示页面模态框