bootstrap modal远程加载的两种方式

方法一：

使用链接 href属性

<a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a>

当点击该连接时，demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中。当然这里的连接也可以是controller

方法二：

使用脚本


$("#myModal").modal({  remote: "page.jsp"
});

但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询详细信息，modal的数据是不能更新的，即使传的id值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。
最简单的方式就是监听modal的hidden，当modal关闭时，即把数据清除即可：

//v2$("#myModal").on("hidden", function() {$(this).removeData("modal");});//v3$("#myModal").on("hidden.bs.modal", function() {$(this).removeData("bs.modal");});

问题来了：如果在请求的页面中有$()加载事件加载比如boostrap-validator或者boostrap-fileinput等插件会出现奇怪的现象，第一次正常执行，关掉modal，第二次，$()的代码没有执行，第三次能执行；经过反复发现“hidden.bs.modal”监听每次都执行了，但是加载到<div class="modal-content"></div>里面的数据没有被清除，可能是这个原因导致的这种现象，于是改成如下代码：

$("#myModal").on("hidden.bs.modal", function() {$(this).removeData("bs.modal");/*modal页面加载$()错误,由于移除缓存时加载到<div class="modal-content"></div>未移除的数据，            手动移除加载的内容*/$(this).find(".modal-content").children().remove();});

转载：https://blog.csdn.net/kewanjun_lcx/article/details/54748286

实例：

促发按钮：

 <a  type="button" class="btn btn-primary"  href="{:U('index/suggestReply',['id'=>$item['id']])}" data-toggle="modal" data-target="#replyModal">回复</a>

modal:

<div  class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel" aria-hidden="true" data-backdrop="static"><div class="modal-dialog"><div class="modal-content" style="width:650px;margin-top: 200px;"></div><!-- /.modal-content --></div><!-- /.modal -->
</div>

远程加载的内容（确认按钮在这里头写JS）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>li{list-style-type: none;}.form{padding:20px 10px 30px 10px;font-size:14px;}.form .title{margin-bottom:20px;color:#588cd8;}.form .item{margin-bottom:40px;}.form .item-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:10px;min-height:30px;line-height:30px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #ddd;}.form .label{display:inline-block;width:90px;line-height:30px;text-align: center;background:#d8d7d5;}.item-content{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;padding:0 20px;}.item-desc{height:180px;}.item-desc .label{line-height:180px;}.item-desc .item-content{overflow-y:auto;}.form .button button{float:right;width:70px;height:30px;line-height:30px;text-align: center;background:#568edb;color:#fff;font-size:16px;-webkit-border-radius:5px;border-radius:5px;border:none;outline: none;}.form .button{overflow:hidden;}.form  .reply .item-wrapper{height:40px;line-height:40px;}.form  .reply input{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;border:none;outline: none;padding:0 10px;}.item-desc ul:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.item-desc ul li{float:left;width:50%;}.item-content .desc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.item-content .desc span{width:100px;}.item-content .desc p{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}</style>
</head><body>
<div class="form"><div class="item"><div class="title">问题描述</div><div class="item-wrapper"><span class="label">提交人</span><span class="item-content" style="text-align: left;">{$data.create_user}</span></div><div class="item-wrapper item-desc"><span class="label">问题描述</span><div class="item-content"><ul><li><span>问题类型：</span><switch name="data.type"><case value="1">处理结果不满</case><case value="2">回复时间不满</case><case value="3">服务态度不满</case><case value="4">服务水平不满</case><case value="5">游戏建议反馈</case><case value="6">平台建议反馈</case><default />未知类型</switch></li><li><span>涉及客服：</span>{$data.customer_service}</li><li><span>问题账号：</span>{$data.username}</li><li><span>游戏名：</span>{$gameName}</li><li><span>区服：</span>{$data.server}</li><li><span>角色名：</span>{$data.role}</li></ul><div class="time"><span>发生问题时间：</span><if condition="$data.happen_time eq 0 ">/<else />{$data.happen_time|date="Y-m-d H:i:s",###}</if></div><div class="desc"><span>内容描述：</span><p>{$data.content}</p></div></div></div></div><div class="item reply"><div class="title">回复</div><if condition="$isView eq 1 and $data.reply_status eq 0"><!--查回回复并且未回复 --><div class="item-wrapper"><span class="label">回复内容</span><input type="text" name="reply_content" id='reply_content' placeholder=""></div></if><if condition="$isView eq 1 and $data.reply_status eq 1"><!--查回回复并且已回复 --><div class="item-wrapper"><span class="label">回复人</span><span class="item-content" style="text-align: left;">{$data.reply_user}</span></div><div class="item-wrapper "><span class="label">回复内容</span><!--{$data.reply_time|date="Y-m-d H:i:s",###}--><input type="text" name="reply_content" value="{$data.reply_content}"  placeholder="请输入回复内容"></div></if><if condition="$isView neq 1 and $data.reply_status eq 0"><!--回复并且未回复 --><div class="item-wrapper "><span class="label">回复内容</span><!--{$data.reply_time|date="Y-m-d H:i:s",###}--><input type="text" name="reply_content" id="reply_content"  placeholder="请输入回复内容"></div></if></div><div class="modal-footer" style="text-align:center;"><if condition="$isView neq 1 "><button type="button" class="btn btn-primary suggest_reply_confirm" data-id="{$data.id}" style="padding:6px 25px;">确定</button></if><button type="button" class="btn btn-default" data-dismiss="modal" style="width:100px;padding:6px 25px;">取消</button></div><script>$(function(){//回复点击确认时$('.suggest_reply_confirm').click(function(){var reply_content = $('#reply_content').val();if(reply_content==''){layer.msg('回复内容不能为空');return false;}var id = $(this).data('id');$.ajax({type:"post",url: '{:U("index/suggestConfirm")}',dataType: 'JSON',data: {'id': id, 'reply_content': reply_content},success:function(data){layer.msg(data.message);console.log(data.status);if(data.status==1){window.location.href = "{:U('index/suggestList')}";}}});});});</script></div>
</body></html>

bootstrap modal远程加载的两种方式相关推荐

Cesium加载模型两种方式
Cesium加载模型两种方式代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
jsp页面数据加载的两种方式
JSP数据加载的两种方式第一种: 三层架构写在controller的页面跳转前面,set到request域中 request.setAttribute("name", list) ...
Android实现资源动态加载的两种方式
这是Android Apk源加载机制原理分析以及动态加载实现系列文章的最后一篇.经过前两篇的介绍之后,相关基础都讲的差不多了,现在要实现自己项目中的资源加载框架,这里提供两种方式,区别在于由谁来加载 ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
servlet加载资源两种方式-内外（初始化参数）.properties文件
在servlet中加载资源很方便,通过servletContext,这个是web服务器加载完web项目返回的参数之一,还有servletConfig,得到web项目一些配置信息,request和res ...
xib加载的两种方式
•Xib文件的加载 Ø方法1 NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"AppView" owner:nil op ...
百度地图测加载的两种方式直接加载和异步加载
1.直接加载 <html> <head><meta http-equiv="Content-Type" content="text/html ...
swift 中加载nib两种方式
1, 2,
静态链接库（LIB）和动态链接库（DLL），DLL的静态加载和动态加载，两种LIB文件。
静态链接库(LIB)和动态链接库(DLL),DLL的静态加载和动态加载,两种LIB文件. 一. 静态链接库(LIB,也简称"静态库")与动态链接库(DLL,也简称"动态库 ...
hbase 协处理器部署_HBase协处理器加载的三种方式
本文主要给大家罗列了hbase协处理器加载的三种方式:shell加载(动态).api加载(动态).配置文件加载(静态).其中静态加载方式需要重启hbase. 我们假设我们已经有一个现成的需要加载的协处 ...

bootstrap modal远程加载的两种方式

bootstrap modal远程加载的两种方式相关推荐

最新文章

热门文章