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

开始执行里面的代码了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏charles的技术博客

MySQL 5.7 关闭validate_password密码策略

validate_password_dictionary_file:密码策略文件,策略为STRONG才需要

9576
来自专栏数据和云

性能优化:B*Tree 索引中的数据块分配(五)

黄玮(Fuyuncat) 资深Oracle DBA,个人网www.HelloDBA.com,致力于数据库底层技术的研究,其作品获得广大同行的高度评价. 编辑手记...

2956
来自专栏机器学习算法与Python学习

支持向量机Python实现(附源码与数据)

之前的文章已经将支持向量机的原理讲解的比较清楚了,今天这篇文章主要是基于Python实现支持向量机,具体的数据集和源代码如下所示(文末附有本文使用的数据集和源代...

4295
来自专栏林德熙的博客

C# 使用转换语义版本号

本文告诉大家如何转换语义版本号,那么什么是语义版本号,语义版本号(semantic version)就是版本号带 alpha 等的版本号

1211
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版7.4节set

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

681
来自专栏简书专栏

目标检测第1步-运行tensorflow官方示例

在进行本文操作之前,需要先安装好tensorflow的gpu版本。 本文作者的环境:python3.6、Windows10、tensorflow_gpu1.1...

9833
来自专栏布尔

金格科技iMsg2000消息数据格式

本文介绍的是金格科技iweboffice2003控件前端向服务器发请求后服务器解析数据流的过程,从中也可以了解其前端对数据的封装过程,不复杂很简单,挺不错的数据...

2006
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版3.4节coredump例子

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

971
来自专栏哲学驱动设计

OpenExpressApp 框架结构(2)

    上次随便画了一篇关于GIX4项目目前的类的结构图(见:GIX4 目前大致的类结构),目的是为了更好的认识系统,并对其进行改进。发现AutoUI部分的耦合...

1869
来自专栏深度学习思考者

机器学习特征提取 | 自动特征工程featuretools

1、什么是Featuretools? 为了能使框架普适,就像pandas用于数据准备或scikit-learn用于机器学习。 链接:https://www.fe...

3915

扫码关注云+社区

领取腾讯云代金券