前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap模态框瞬间消失解决

bootstrap模态框瞬间消失解决

作者头像
hotqin888
发布2018-09-11 14:36:52
1.3K0
发布2018-09-11 14:36:52
举报
文章被收录于专栏:hotqin888的专栏

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1334306

bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西。比如,save changes,即点击确认后如何处理?没有例子。只有取消close的功能。我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入、单选、列表选择等,点模态框确认,然后连同刚才的id、模态框中的各种值,一起提交到后台处理。

第一个:用链接传id并打开模态框。

代码语言:javascript
复制
<a href="" data-toggle="modal" onclick="prom('{{$.Category.Id}}')">添加同级</a>

{{$.Category.Id}}是传的id值

通过js代码实现打开模态框

代码语言:javascript
复制
<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+".)");
        //          }
        //     });  
        // }  
    }

这里的坑:

代码语言:javascript
复制
$('#myModal').modal('show');

如果只用这一行代码,模态框就会瞬间消失。

后面添加代码:

代码语言:javascript
复制
$('#myModal').on('hide.bs.modal', function () {

第二步,点击模态框的确认如何做呢?我这个方法很笨。下面是模态框的按钮,我用取消代替确定。

代码语言:javascript
复制
      <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>

在点击确定(其实是关闭)后,触发了

代码语言:javascript
复制
$('#myModal').on('hide.bs.modal', function () {

开始执行里面的代码了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016年05月01日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档