bootstrap学习30--javascript插件--modal dialog

本文详细介绍了Bootstrap模态对话框的使用,包括可选大小的调整(.modal-lg, .modal-sm),基本的data API和JS调用方式,如何添加关闭按钮,动画效果的应用,模态框内编辑栅格系统,以及利用event.relatedTarget和data-*属性进行数据传递。此外,还讨论了监听事件的不同阶段(show, shown, hide, hidden, loaded)和注意事项,特别是动态内容刷新时的处理策略。" 106984696,7480898,使用记事本编译运行Java程序,"['Java开发', '命令行工具', '文本编辑器']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

可选大小

通过对 modal-dialog样式后面追加 .modal-lg 或者 .modal-sm 样式来实现 模态框的大小调整

基本格式

<div class="modal" id="myDialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

data api 调用方式

<button data-toggle="modal" data-target="#myModal">弹框</button>

如果想要实现关闭按钮

data-dismiss = “modal”

js 方式调用窗口

$(“#myModal”).modal(‘show’);

动画效果

.fade

模态框内可以编辑栅格系统

row col-sm-*

配合show.bs.modal的event.relatedTarget 对象 可以绑定data-whatever属性 ,然后传入模态窗口中进行编辑

button上设定 data-* 属性(*自定义)

modal的show.bs.modal 时间 通过event.relatedTarget获取button ,然后通过jq的data(“*”)方法即可获取属性值。

监听事件

show.bs.modal 点击了显示按钮 就能显示

shown.bs.modal 窗口完全显示后 就触发

hide.bs.modal

hidden.bs.model

loaded.bs.modal 远程数据源加载完后

注意事项

  1. 如果是预设定好的静态内容,data-toggle的作用就是用来隐藏或者显示,只做样式的渲染。
  2. 问题就在,如果内容通过href的remote方式进行了二次渲染,那么在重新刷新页面之前,所有静态的内容都被刷掉,不会重置,所有实际业务中应该考虑内容刷新重置的方式,所以建议一直使用remote刷新的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值