摘要:前端框架引导的模态对话框,可以使用远程选项指定一个URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到.modal-body中,但是它只会加载一次,不过通过在事件中调用removeData()方法可以解决这个问题。
& lt; div id=癿yModal”class=澳Ｌ赝噬北?
& lt; div类=癿odal-header”比;
& lt;按钮类型=鞍磁ァ眂lass=肮乇铡眃ata-dismiss=澳Ｌ弊４莤
& lt; h4>对话框标题& lt;/h4>
& lt;/div>
& lt; div类=癿odal-body”比;
& lt; p>对话框主体& lt;/p>
& lt;/div>
& lt; div类=癿odal-footer”比;
& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”类=癰tn data-dismiss”=澳Ｌ弊４侨∠? lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”类=癰tn btn-primary data-dismiss”=澳Ｌ弊４侨范? lt;/a>
& lt;/div>
& lt;/div>
显示效果与下图相似:
可以使用按钮或链接直接调用模态对话框,这是简单的用法:
& lt;按钮类型=鞍磁ァ眃ata-toggle=澳Ｌ笔菽勘?" # myModal "祝辞打开对话框& lt;/button>
& lt; a href=" https://www.yisu.com/zixun/myModal”rel=巴獠縩ofollow”=鞍磁ァ崩嘟巧?癰tn data-toggle”=澳Ｌ钡脑诖蚩曰翱? lt;/button>
这样只能把静态内容在对话框中显示出来,使用对话框的远程选项可以实现更强大的效果。
有两种方法,一种是使用链接,另一种就是使用脚本。
<强> 2.1使用链接
& lt; a href=" https://www.yisu.com/zixun/page.jsp " rel=巴獠縩ofollow”data-toggle=澳Ｌ笔菽勘?" # myModal "祝辞打开对话框& lt;/a>
之前
当点击此链接时,页面。jsp的内容会被加载到对话框的.modal-body中,随即显示对话框。
<强> 2.2使用脚本
$ (" # myModal ") .modal ({
远程:“page.jsp”
});
这段脚本的效果和使用链接是一样的,当这段脚本执行后,页面。jsp的内容会被加载到对话框的.modal-body中,随即显示对话框。
这两种方法的背后,都是引导调用了jQuery的负载()方法,从服务器端加载了页面。jsp页面。但这个加载只会发生一次,后面不管你点击几次链接,或者执行几次脚本,哪怕改变传递给远程选项的值,对话框都不会重新加载页面,这真是个让人头疼的事情。不过问题还是能够解决的。
在搜索并查阅了相关文档后,发现在对话框隐藏的事件里写上一条语句就可以了:
$ (" # myModal”)。(“隐藏”,函数(){
(美元).removeData(模态);
})；
之前
也可以在每次打开对话框之前移除数据,效果是一样的。
上面的代码基于引导v2,如果使用Bootstrape v3,模态对话框的HTML和事件的写法有一些不同,例如对于上面隐藏的事件,要写成:
$ (" # myModal ")。(“hidden.bs。模态”,函数(){
(美元).removeData (“bs.modal”);
});
以上这篇基于引导模态对话框只加载一次远程数据的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
