Bootstrap 模态框（Modal）插件

最新推荐文章于 2023-12-21 15:59:38 发布

原创最新推荐文章于 2023-12-21 15:59:38 发布 · 382 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #Bootstrap #模态框

杂七杂八专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过Ajax调用实现的模态框弹窗效果，点击“更多”链接时将加载预警信息列表并显示在一个模态框中。模态框使用了HTML和JavaScript进行实现，并且详细展示了如何通过Ajax请求获取数据并将其填充到模态框内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
点击更多弹出表单


弹出表单效果









<!--  ---------------------------模态框-------
 -->
<a href="#" onclick="warningList()">更多</a>


<!-- 模态框（Modal） -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<!-- 添加淑视频列表界面 -->
	<%-- <iframe id="structMapInfo" src="xx/xx/warningRecord/list" style="width:100%;height:100%;" frameborder="0"></iframe> --%>
</div>
<!-- ----------------------------点击事件---------------------------------------------->
//弹出预警信息列表function

 warningList() { 
 $.ajax({
  url : "xx/xx/warningRecord/list", 
  success :function(data) { 
  $('#warningModal').html(data);
$('#warningModal').modal(); 
} 
}); 
/* $('#warningModal').modal();
*/}
<!-- ----------------------------返回页面----------------------------------------------------
 -->
 @RequestMapping(value = {"list",""}) 
 public ModelAndViewlist(WarningRecord warningRecord, HttpServletRequest request,HttpServletResponse response, Model model) { 
 return newodelAndView("xx/xx/warningRecordList"); 
 }




弹出表单效果









<!--  ---------------------------模态框-------
 -->
<a href="#" οnclick="warningList()">更多</a>


<!-- 模态框（Modal） -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<!-- 添加淑视频列表界面 -->
	<%-- <iframe id="structMapInfo" src="xx/xx/warningRecord/list" style="width:100%;height:100%;" frameborder="0"></iframe> --%>
</div>
<!-- ----------------------------点击事件---------------------------------------------->
//弹出预警信息列表function

 warningList() { 
 $.ajax({
  url : "xx/xx/warningRecord/list", 
  success :function(data) { 
  $('#warningModal').html(data);
$('#warningModal').modal(); 
} 
}); 
/* $('#warningModal').modal();
*/}
<!-- ----------------------------返回页面----------------------------------------------------
 -->
 @RequestMapping(value = {"list",""}) 
 public ModelAndViewlist(WarningRecord warningRecord, HttpServletRequest request,HttpServletResponse response, Model model) { 
 return newodelAndView("xx/xx/warningRecordList"); 
 }