`
qw232144
  • 浏览: 35284 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Bootstrap Modals（模态框）

 
阅读更多

        Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。
下面的实例演示了 Bootstrap Modals（模态框）长什么样。

 

 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Modals Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>		        
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>
</body>
</html>

 

下面的表格解释了上面的代码。它将帮助您理解如何使用 Bootstrap Modals（模态框）。

码 解释
div id="example" 分配给相关 div 的 id，id 的值指向后边要实现 modal（模态框）的 JavaScript。
class="modal hide fade in" Bootstrap CSS 的四个 class - modal、hide、fade 和 in，用于设置 modal（模态框）的布局。
style="display: none; 用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
<div class="modal-header"> modal-header 适用于定义模态窗口标题样式的 class。
a class="close" CSS class close 用于设置模态窗口关闭按钮的样式。
data-dismiss="modal" data-dismiss 是一个定制的 HTML5 data 属性。用于关闭模态窗口。
class="modal-body" modal-body 是 Bootstrap 的一个 CSS class，用于设置模态窗口主体的样式。
class="modal-footer" modal-footer 是 Bootstrap 的一个 CSS class，用于设置模态窗口尾部的样式。
class="btn btn-success" CSS class btn 和 btn-success 用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap 按钮代替。
class="btn" Bootstrap CSS 的 按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。
data-dismiss="modal" HTML5 定制的 data 属性 data-dismiss，用于关闭模态窗口。
data-toggle="modal" HTML5 定制的 data 属性 data-toggle，用于打开模态窗口。
class="btn btn-primary btn-large" 设置按钮样式，点击该按钮则创建模态窗口。
<script src="https://ajax.googleapis.com/ajax/libs
/jquery/1.7.1/jquery.min.js"></script>		 引用 Jquery 文件。
<script src="../bootstrap/twitter-bootstrap-v2>
/js/bootstrap-modal.js"></script>		 引用 bootstrap modal（模态框）的 JS 文件。


你可以使用 JavaScript 来实现 Bootstrap 模态窗口。只需要在您的 JavaScript 中调用 modal() 即可。您的代码如下所示，您可以在 body 结束标签（即 </body>）前引用它。

 

$(function ()  
{ $("#identifier").modal();  
});

 

  • 大小: 8 KB
分享到：
| JQuery中$.ajax()方法参数详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浅析BootStrap模态框的使用(经典)

    Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。 1,...

    Bootstrap 模态框实例插件案例分析

     Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。...

    bootStrap框架示例

    4. **组件**：如按钮（buttons）、下拉菜单（dropdowns）、模态框（modals）、提示信息（tooltips）和弹出框（popovers）等，提供丰富的交互体验。 5. **表单**：Bootstrap提供了表单控件的样式，使得表单更加美观...

    bootstrap的整套框架的html静态页面示例集合

    3. **Bootstrap组件**：此集合中可能包含了各种Bootstrap组件，如导航栏（Navbar）、按钮（Buttons）、表单（Forms）、下拉菜单（Dropdowns）、模态框（Modals）、轮播（Carousel）、警告提示（Alerts）、卡片...

    rails-bootstrap-modals:这个应用程序展示了如何在 rails 4 中使用模态

    在本项目 "rails-bootstrap-modals" 中，我们将探讨如何在 Rails 4 应用中整合 Bootstrap 的模态功能。 模态（Modal）是 Bootstrap 提供的一种功能，它可以创建弹出窗口，用户可以在不离开当前页面的情况下查看或...

    后端UI框架bootstrap4

    它使用Sass预处理器，提供了更丰富的自定义选项，并引入了新的组件和改进过的经典组件，如卡片（Cards）和模态框（Modals）。 2. **图表集成**：压缩包中的"chart.html"可能包含了与Bootstrap 4兼容的图表库，比如...

    Bootstrap+framework框架制作的水果

    2. **预定义组件**：Bootstrap提供了一系列预先设计好的组件，如导航栏（Navbar）、按钮（Buttons）、表单（Forms）、下拉菜单（Dropdowns）、模态框（Modals）、警告提示（Alerts）等，大大简化了网页开发过程。...

    一份Bootstrap框架的期末作业

    常见的Bootstrap组件有导航栏（navbar）、按钮（buttons）、表单（forms）、网格系统（grid system）、下拉菜单（dropdowns）、模态框（modals）、轮播图（carousel）等。通过这些组件，开发者可以快速构建出美观且...

    bootstrap的前端页面框架

    3. **组件**：Bootstrap的组件包括导航条（navbar）、下拉菜单（dropdowns）、模态框（modals）、轮播图（carousel）、提示信息（tooltips）和弹出框（popovers）等。这些组件大大简化了网页交互元素的实现。 4. **...

    bootstrap框架开发源码

    框架中的CSS组件涵盖了各种常见的设计元素，如按钮（Buttons）、表单（Forms）、导航（Navigation）、警告框（Alerts）、模态框（Modals）、下拉菜单（Dropdowns）等，这些预定义的样式极大地提高了开发效率。...

    bootstrap自己塔建的动态后台框架

    3. **组件库**：Bootstrap提供了丰富的预设组件，如导航条（Navbar）、按钮（Buttons）、表单（Forms）、下拉菜单（Dropdowns）、模态框（Modals）、警告提示（Alerts）等，这些都是构建后台界面的基础元素，可以...

    bootstrap 前端框架 dome 和列子

    4. **组件**：Bootstrap包含多种可重用的组件，如导航条（Navbar）、下拉菜单（Dropdowns）、按钮组（Button Groups）、卡片（Cards）、模态框（Modals）、轮播（Carousel）等。 5. **JavaScript插件**：除了基本的...

    Bootstrap4框架酒店预订模板

    Bootstrap4还提供了丰富的组件，如导航条(navigation bar)、按钮(buttons)、表单(forms)、卡片(cards)和模态框(modals)，这些在酒店预订模板中都可能被应用，以提升用户体验。例如，导航条可以方便用户在各个页面间...

    深入浅出bootstrap模态框modal.js

    本篇博客参考https://v3.bootcss.com/javascript/#modals-examples 先上bootstrap官网瞅一眼: 原创文章 171获赞 72访问量 5万+ 关注 私信 展开阅读全文 作者：记得养胃鸭

    bootstrap框架

    Bootstrap包含了一系列预设的CSS样式，覆盖了字体、颜色、间距、边框、背景等基本元素，以及按钮、表格、图片、警告框、模态框、导航条、轮播图等多种组件。这些组件都有统一的样式和交互，极大地提高了开发效率和...

    使用bootstrap做的登陆、注册、忘记密码页面

    Bootstrap的CSS组件包括但不限于：导航条（Navbar）、按钮（Buttons）、表单（Forms）、警告提示（Alerts）、模态框（Modals）等。JavaScript插件则扩展了这些组件的功能，例如，模态框可以通过JavaScript轻松触发...

    五套超级漂亮的bootstrap框架写的后台模板

    其次，Bootstrap的组件库包括按钮（Buttons）、表单（Forms）、表格（Tables）、模态框（Modals）、下拉菜单（Dropdowns）等，这些在后台管理界面中非常常见。开发者可以快速地将这些预定义的样式和交互应用到后台...

    基于bootstrap实现的后台框架模板

    其次，Bootstrap提供了一套完整的组件库，包括导航条(navigation bars)、下拉菜单(dropdowns)、按钮(buttons)、表单(forms)、模态框(modals)、警告提示(alerts)、轮播(carousels)等。这些组件在后台框架模板中会被...

    bootstrap框架管理后台

    6. **模态框（Modals）**：模态框在不离开当前页面的情况下提供额外信息或操作，是后台管理系统中常见的交互元素，例如用于确认操作、显示详细信息等。 7. **警告提示（Alerts）**：Bootstrap的警告提示用于向用户...

Magicbox
Global site tag (gtag.js) - Google Analytics