无忧中英繁企业网站系统通用版,上海进出口贸易公司有哪些,网站注册可以免费吗,网站活动页面简介#xff1a;模态框#xff08;Modal#xff09;是覆盖在父窗体上的子窗体。通常#xff0c;目的是显示来自一个单独的源的内容#xff0c;可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
Modal简介Modal实现弹出表单Modal实现删除提示框其他用法… 简介模态框Modal是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
Modal简介Modal实现弹出表单Modal实现删除提示框其他用法
Bootstrap 模态框Modal插件
模态框Modal是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能那么您需要引用 modal.js。或者正如 Bootstrap 插件概览 一章中所提到您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 !DOCTYPE html
html
headmeta charsetutf-8 titleBootstrap 实例 - 模态框Modal插件/titlelink relstylesheet hrefhttp://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.cssscript srchttp://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js/scriptscript srchttp://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js/script
/head
body
h2创建模态框Modal/h2
!-- 按钮触发模态框 --
button classbtn btn-primary btn-lg data-togglemodal data-target#myModal开始演示模态框
/button
!-- 模态框Modal --
div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabel aria-hiddentruediv classmodal-dialogdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-hiddentruetimes;/buttonh4 classmodal-title idmyModalLabel模态框Modal标题/h4/divdiv classmodal-body在这里添加一些文本/divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal关闭/buttonbutton typebutton classbtn btn-primary提交更改/button/div/div!-- /.modal-content --/div!-- /.modal --
/div
/body
/html 代码讲解
使用模态窗口您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。如果您仔细查看上面的代码您会发现在 button 标签中data-target#myModal 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框然后为每个模态框创建不同的触发器。现在很明显您不能在同一时间加载多个模块但您可以在页面上创建多个在不同时间进行加载。在模态框中需要注意两点 第一是 .modal用来把 div 的内容识别为模态框。第二是 .fade class。当模态框被切换时它会引起内容淡入淡出。aria-labelledbymyModalLabel该属性引用模态框的标题。属性 aria-hiddentrue 用于保持模态窗口不可见直到触发器被触发为止比如点击在相关的按钮上。div classmodal-headermodal-header 是为模态窗口的头部定义样式的类。classcloseclose 是一个 CSS class用于为模态窗口的关闭按钮设置样式。data-dismissmodal是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。classmodal-body是 Bootstrap CSS 的一个 CSS class用于为模态窗口的主体设置样式。classmodal-footer是 Bootstrap CSS 的一个 CSS class用于为模态窗口的底部设置样式。data-togglemodalHTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
