注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

@fc_lamp

关注Web应用解决方案MySql/PHP/Python一盏名为"飞川"的灯~

 
 
 

日志

 
 

Bootstrap模态框中如使用AJAX请求  

2014-11-25 13:46:14|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Bootstrap模态框AJAX请求做法,来一个草稿版吧:

<html>
<head>
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css">
<script type="text/javascript" src="/js/bootstrap.min.js"></script><!--自行引入相关资源-->
</head>
<body>




<a href="javascript:void(0);" data-id="1" class="opencoupon" >OPEN </a><!--触发点1-->
<a href="javascript:void(0);" data-id="2" class="opencoupon" >OPEN </a><!--触发点2-->
<a href="javascript:void(0);" data-id="3"class="opencoupon" >OPEN </a><!--触发点3-->



<!-- 模态框弹出层 -->
<div class="modal fade modal-coupon" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title">标题</h4>
</div>
<div class="modal-body">
<!--这里内容-->
</div>
</div>
</div>
</div>




<!--相关JS -->
<script>
$('.opencoupon').click(function(){

$('.modal-coupon').modal({
show: true,
//backdrop: false,此参数用于禁用点其他地方自动关闭
}) //弹出框

var gid = $(this).attr('data-id');

//AJAX获取内容
var url = 'xxxxx'+gid
$.getJSON(url,{"r":Math.random()},function(json)
{

if(json.status==1){

$('.modal-body').append(json.data);//写入返回回来内容

}else{
alert(json.data);
}
return false;
});

});


//关闭时,清除之前的数据。
$(".modal-coupon").on("hidden.bs.modal", function() {
//alert(1)
$('.couponalllist').html('');
$(this).removeData("bs.modal");
});


</script>


</body>
</html>




  评论这张
 
阅读(590)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017