前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap模态框相关操作配置

Bootstrap模态框相关操作配置

原创
作者头像
俗可耐
发布2018-07-25 14:25:04
2.1K0
发布2018-07-25 14:25:04
举报
文章被收录于专栏:俗人笔记

动态打开/关闭Modal模态框

代码语言:txt
复制
// 显示
$('#MyModal').modal('show');
// 关闭
$('#MyModal').modal('hide');
// 切换
$('#MyModal').modal('toggle');

监听模态框关闭事件

代码语言:txt
复制
$('#MyModal').on('hidden.bs.modal', function(){
});

设置模态框点击外部和Esc按键不可关闭

html中设置:

代码语言:txt
复制
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
</button>

js中创建时设置:

代码语言:txt
复制
$('#myModal').modal({backdrop: 'static', keyboard: false});

动态切换是否可点击外部关闭

代码语言:txt
复制
// 不可关闭
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;
// 允许关闭
$('#myModal').data('bs.modal').options.backdrop = true;
$('#myModal').data('bs.modal').options.backdrop = true;
// Bootstrap2里应该用data('modal')

解决模态框一直增加body的padding-right的问题

代码语言:txt
复制
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 动态打开/关闭Modal模态框
  • 监听模态框关闭事件
  • 设置模态框点击外部和Esc按键不可关闭
    • 在html中设置:
      • 在js中创建时设置:
        • 动态切换是否可点击外部关闭
        • 解决模态框一直增加body的padding-right的问题
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档