BootStrap点击保存后实现模态框自动关闭的思路(模态框)

需求如下：

在弹出的模态框中点击 “更换” 按钮后 实现模态框自动关闭，

做法：

给“更换“按钮加上：data-dissmiss="modal"

<button type="button" class="btn btn-primary btn-sm"data-dismiss="modal" >更换</button>

总结

以上所述是小编给大家介绍的BootStrap点击保存后实现模态框自动关闭的思路(模态框)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap模态框禁用空白处点击关闭

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框. $('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不

  • BootStrap 模态框实现刷新网页并关闭功能

    方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.

  • BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    BootStrap点击保存后实现模态框自动关闭的思路(模态框)

    需求如下: 在弹出的模态框中点击 "更换" 按钮后 实现模态框自动关闭, 做法: 给"更换"按钮加上:data-dissmiss="modal" <button type="button" class="btn btn-primary btn-sm"data-dismiss="modal" >更换</button> 总结 以上所述是小编给大家介绍的BootStra

  • Bootstrap中点击按钮后变灰并显示加载中实例代码

    Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示． 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮

  • BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

  • 使用Jquery实现点击文字后变成文本框且可修改

    使用Jquery实现点击文字变为文本框效果,可对文本框文字进行修改. 1.点击文字变为文本框 2.文本框自动全选文字 3.对文本框内容进行修改 4.点击文本框以外的地方文本框再次变为修改后的文字 5.同步更新SQL数据库内容 Html部分代码 复制代码 代码如下: <table width="200"> <tr> <td><b>ID</b></td> <td><b>名称</b>&

  • jQuery实现点击按钮文字变成input框点击保存变成文字

    废话不多说,直接给大家贴代码了. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8"> <title>点击按钮文字变成inpu

  • 点击按钮后 文本框变为Select下拉列表框

    点击按钮后,文本框变为Select下拉列表框 function showSelect(){ var _t = document.getElementById('t'); var _s = document.getElementById('sel'); if( _t.style.display == ''){ _t.style.display = 'none'; } else{ _t.style.display = ''; } if ( _s.style.display == 'none' ){

  • bootstrap 点击空白处popover弹出框隐藏实例

    代码: <div> <a class="btn btn-success show" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> aaaa </a>

  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样.于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法. $(".love .collapse").collapse('hide'); 调用之后发现,点击连接苗,data-parent失效了,也就是可

  • vue实现提示保存后退出的方法

    假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由.比较好的做法应该是给出一个提示-"您编辑的内容还未保存,是否确认退出?"用户如果点击"确定",那么不保存当前内容直接退出,用户如果点击"取消",则取消本次路由跳转,继续留在原来的页面. 尝试的错误做法 一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现.代码如下: 首先在vuex中新增一个状态值-introduceSta

  • 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia

随机推荐