Samool's Blog
  • 动态日历
    统计近10个月的博主文章和评论数目

    Loading...

    分类雷达图

    Loading...

    发布统计图

    Loading...

    分类统计图

    Loading...

    标签统计图

    Loading...

  • 时光机 新
    时光机
    时光机是什么鬼?
    2024-07-23 12:26:27
  • 文章
  • 时光机
samool(王大勇) 软件工程师、数据库工程师、系统构架师、资深暗黑粉丝、B站双流必胜客

  🌄 成都傻猫软件有限公司
  🌎️ 中国.成都   技术服务商
  👉 大模型应用创业者
  ☯️
SamoolSoft.com

  主要作品:
  ✅️ 轻武智能 ip66.com
  ✅️ 宽带运营支撑系统 KDBOSS.cn
  ✅️ 宽带计费认证系统SaRadius
  ✅️ 红河广电KDBOSS-CBN
  ✅️ 长城宽带GWCOS
  ✅️ 艾普宽带AipuBOSS
  ✅️ 星空数码伴侣
  ✅️ 楼盟小蜜蜂
  ✅️ 网页助手WebHelp

  • 晚上好,注意早点休息

  • 首页
  • 关于
  • 工作
  • 开源
  • 日志
  • 说说
  • 豆瓣
  • 留言
  • 分类
    • 搞软件
      • 9Delphi
      • 0.Net
    • 搞项目
      • 33Ai
      • 1云计算
      • 19大数据
      • 0物联网
    • 5爱读书
    • 2爱音乐
    • 0爱影视
    • 27学经验
    • 1639享生活
    • 87小茶馆
  • 页面
    • 兴趣爱好
    • 雁过留声
    • 时光机
    • 日志归档
    • 开源项目
    • 友情链接
    • 关于我
    • 我的作品
  • 友链
    • 傻猫软件
    • 轻武认证计费系统
    • cnPack专家
    • typecho作者
    • handsome主题
    • 互联网产品经理
    • A君的博客
    • 假行僧
    • 小白菜
    • 泽泽社长
    • LeXtudio
    • 陆之岇
    • 流芒阿辉
    • 迷你日志

samool

bootstrap弹出层modal-dialog使用方法
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用...
扫描右侧二维码阅读全文
25
2019/12

bootstrap弹出层modal-dialog使用方法

  • 博主: samool
  • 发布时间:2019 年 12 月 25 日
  • 5148 次浏览
  • 暂无评论
  • 3478字数
  • 分类: 享生活
  1. 首页
  2. 正文  
  3. 分享到:
通常不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal" 属性,或者 data-target="#foo" 属性,再或者 href="#foo" 属性,用于指向被控制的模态框。 通过JavaScript调用modal ------------------- 通常只需一行 JavaScript 代码,即可通过元素的 id myModal 调用模态框: $('#myModal').modal(options) ![javacript参数.png][2] javacript调用示例 ------------- 1.将页面中的某块内容作为模态框激活。接受可选参数 object。 $('#myModal').modal({ keyboard: false }) 2.手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。 $('#myModal').modal('toggle') 3.手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。 $('#myModal').modal('show') 4.手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。 $('#myModal').modal('hide') 5.更新模态框,在模态框动态添加或删除内容时: $('#myModal').modal('handleUpdate') 绑定事件 ---- Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。 ![绑定事件.png][3] $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) [1]: https://samool.com/usr/uploads/2019/12/2521725220.jpg [2]: https://samool.com/usr/uploads/2019/12/806715974.png [3]: https://samool.com/usr/uploads/2019/12/375540021.png

bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能。

bootstrapwindows.jpg

默认的modal示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>
 
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

**1. 为 .modal 添加 role="dialog",用于指定模态框为对话框。

  1. 为 .modal-dialog 添加 aria-hidden="true" 属性。
  2. 通过 aria-describedby 属性为模态框 .modal 添加描述性信息。**

关闭动画

如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可。

通过按钮属性显示不同内容
当有一堆按钮,都要触发相同的模态框(如:向好友列表中某个人发消息),只是有用户ID不同,那么可以使用data-whatever配合event.relatedtarget来实现:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Modal</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
 
 
<div class="panel panel-default">
    <div class="panel-heading">好友列表</div>
    <div class="panel-body">
        <div class="list-group" role="group" aria-label="好友列表">
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="张三">张三
            </button>
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="李四">李四
            </button>
            <button type="button" class="list-group-item" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="王二">王二
            </button>
        </div>
    </div>
</div>
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 触发事件的按钮
        var recipient = button.data('whatever') // 解析出data-whatever内容
        var modal = $(this)
        modal.find('.modal-title').text('Message To ' + recipient)
        modal.find('.modal-body input').val(recipient)
    })
</script>
</body>
</html>

通常不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal" 属性,或者 data-target="#foo" 属性,再或者 href="#foo" 属性,用于指向被控制的模态框。

通过JavaScript调用modal

通常只需一行 JavaScript 代码,即可通过元素的 id myModal 调用模态框:

$('#myModal').modal(options)

javacript参数.png

javacript调用示例

1.将页面中的某块内容作为模态框激活。接受可选参数 object。

$('#myModal').modal({
  keyboard: false
})

2.手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或 hidden.bs.modal 事件之前)。

$('#myModal').modal('toggle')

3.手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。

$('#myModal').modal('show')

4.手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。

$('#myModal').modal('hide')

5.更新模态框,在模态框动态添加或删除内容时:

$('#myModal').modal('handleUpdate')

绑定事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
绑定事件.png

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

最后修改:2019 年 12 月 25 日
© 允许规范转载

赞赏作者

  • 支付宝
  • 微信
支持就是力量
  • 文章引用
  • 反向引用

Loading...

暂未引用其他文章
暂未被其它文章引用
  • 下一篇
  • 上一篇

发表评论 取消回复
使用cookie技术保留您的个人信息以便您下次快速评论,继续评论表示您已同意该条款

🎲
  • 热门文章
  • 最新评论
  • 随机文章
  • google map 离线地图操作方法

    浏览次数: 197504
  • 《小猪佩奇、粉红猪小妹、Peppa Pig》高清1080p 中英文原版下载

    浏览次数: 168698
  • 《Stanley博士的家》高智商游戏

    浏览次数: 131309
  • 彭丹 邓家佳 同性恋电影《除却巫山》介绍

    浏览次数: 93067
  • 设置WebBrowser的Referrer值

    浏览次数: 91830
  • 入宅吉日
    ai写的故事,没有感情色彩
  • 《浅谈搜索引擎优化SEO 》,被评为“雅虎畅言SEO”征文大赛纪念奖 - 傻猫网络日志 Samool's blog - 二十年老博客
    [...]今天登录雅虎邮箱发现偶中奖了,嘿嘿。邮件内容如下:我...
  • skyun-znc
    过年好!还能下载,太好了
  • ly200757
    多谢分享,稀有资源
  • 无
    快乐,来自2024.10.10.12.40
  • Android 获取正在运行的任务和服务

    浏览次数: 8106
  • 嫦娥一号今日正式“定居”月球

    浏览次数: 7373
  • 腾讯 QQ/TM 珊瑚虫增强包 V6.0 兔兔修改版

    浏览次数: 43861
  • 30个受益终生的道理

    浏览次数: 1829
  • 网上“淘宝”的新烦恼

    浏览次数: 6716
博客信息
  • 2448文章数目
  • 3254评论数目
  • 20年262天运行天数
  • 49 分钟前最后活动
广告
双流-哔哩哔哩直播间
文章标签
bootstrap 弹窗口
文章目录

bootstrap弹出层modal-dialog使用方法

samool • 2019 年 12 月 25 日
文章目录
阿里云提供支持 Theme by handsome
© 2025 All rights reserved.   蜀ICP备14011608号