Bootstrap 模态框(Modal)插件

本文介绍了一种通过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"); 
 }


 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值