bootstrap模态框瞬间消失解决
bootstrap模态框瞬间消失解决
hotqin888
发布于 2018-09-11 14:36:52
发布于 2018-09-11 14:36:52
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1334306
bootstrap模态框挺好，但这方面的例子很少，都是官方的代码，网上没有一点新的东西。比如，save changes，即点击确认后如何处理？没有例子。只有取消close的功能。我的需求是这样，点击一个链接，传一个id，打开模态框，进行输入、单选、列表选择等，点模态框确认，然后连同刚才的id、模态框中的各种值，一起提交到后台处理。
第一个：用链接传id并打开模态框。
<a href="" data-toggle="modal" onclick="prom('{{$.Category.Id}}')">添加同级</a>{{$.Category.Id}}是传的id值
通过js代码实现打开模态框
<script type="text/javascript">
//添加同级
function prom(id) {
$('#myModal').modal('show');
$('#myModal').on('hide.bs.modal', function () {
var radio =$("input[type='radio']:checked").val();
alert("您选择的是：" + radio + "。抱歉！添加功能暂时不提供。");
});
// if (cname)
// {
// $.ajax({
// type:"post",
// url:"/category/post",
// data: {pid:id,title:cname},//父级id
// success:function(data,status){
// alert("添加“"+data+"”成功！(status:"+status+".)");
// }
// });
// }
}这里的坑：
$('#myModal').modal('show');如果只用这一行代码，模态框就会瞬间消失。
后面添加代码：
$('#myModal').on('hide.bs.modal', function () {第二步，点击模态框的确认如何做呢？我这个方法很笨。下面是模态框的按钮，我用取消代替确定。
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>在点击确定（其实是关闭）后，触发了
$('#myModal').on('hide.bs.modal', function () {开始执行里面的代码了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年05月01日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读