bootstrap模态框瞬间消失解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/51291224

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 () {

开始执行里面的代码了。


阅读更多

没有更多推荐了,返回首页