首页 / BOOTSTRAP / 整理关于Bootstrap模态弹出框的慕课笔记

整理关于Bootstrap模态弹出框的慕课笔记

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了整理关于Bootstrap模态弹出框的慕课笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6787字，纯文字阅读大概需要10分钟。

内容图文

整理自慕课笔记

插件的源文件：modal.js。

在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示：

整理关于Bootstrap模态弹出框的慕课笔记 - 文章图片

<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">模态弹出窗标题</h4>
   </div>
   <div class="modal-body">
    <p>模态弹出窗主体内容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
 $(function(){
 $(".btn").click(function(){
  $("#mymodal").modal("toggle");
 });
 });
</script>
</body>

结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
1. 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
2. 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
3. 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

<div class="modal show">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">模态弹出窗标题</h4>
   </div>
   <div class="modal-body">
    <p>模态弹出窗主体内容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

实现原理

bootstrap中的“模态弹出框”有以下几个特点：
1、模态弹出窗是固定在浏览器中的。
2、在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

两种尺寸选择

除此之外，Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整：

<divclass="modal-dialog modal-lg">

触发方法

众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种，接下来分别来介绍这2种触发模态弹出窗的使用方法。

声明式触发方法

方法一

模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=”” 或者 data-dismiss=”“）。例如：

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
  <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

注意以下事项：
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

方法二

触发模态弹出窗也可以是一个链接元素，那么可以使用链接元素自带的href属性替代data-target属性，如：

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" rel="external nofollow" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal" >
 <div class="modal-dialog" >
  <div class="modal-content" >
  <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

不过建议还是使用统一使用data-target的方式来触发。

增加过度动画

为模态弹出框增加过度动画效果：
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">模态弹出窗标题</h4>
   </div>
   <div class="modal-body">
    <p>模态弹出窗主体内容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div>
 </div>
</div>

模态弹出窗的使用（data-参数说明）

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

整理关于Bootstrap模态弹出框的慕课笔记 - 文章图片

使用（JavaScript触发）

除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。如下面的一个简单示例：

<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">模态弹出窗标题</h4>
   </div>
   <div class="modal-body">
    <p>模态弹出窗主体内容</p>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-primary">保存</button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript触发的弹出窗代码：

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal();
 });
});

设置参数

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有：

整理关于Bootstrap模态弹出框的慕课笔记 - 文章图片

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){
 $(".btn").click(function(){
  $("#mymodal").modal({
   keyboard:false
  });
 });
});

参数设置

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

整理关于Bootstrap模态弹出框的慕课笔记 - 文章图片

事件设置

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

整理关于Bootstrap模态弹出框的慕课笔记 - 文章图片

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的整理关于Bootstrap模态弹出框的慕课笔记全部内容，希望文章能够帮你解决整理关于Bootstrap模态弹出框的慕课笔记所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/344814.html

来源：【匿名】

【上一篇】Bootstrap 响应式实用工具实例详解【下一篇】Bootstrap+PHP表单验证实例

更多 ►

【整理关于Bootstrap模态弹出框的慕课笔记】教程文章相关的互联网学习教程文章

小蚂蚁学习Bootstrap（3）——标签页Tags制作和弹出框制作【代码】

标签页Tags 标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间，其实吧，就是我们常说的选项卡。 <ul class="nav nav-tabs" role="tablist"> <li class="active">  <a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a...

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码作者：懒得安分字体：[增加减小] 类型：转载时间：2015-12-08 我要评论这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码，对弹出框和提示框感兴趣的小伙伴们可以参考一下前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作...

bootstrap中弹出窗体dialog的自定义【代码】【图】

感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog根据需要弹出窗体，但是可以移动，不遮挡下面的内容，所以就修改了源代码，添加了一个属性：dataBackdrop，如果为false，则不生成遮罩。同时添加了缩小按钮var dialogId = ‘eventModal‘;var dialog = new BootstrapDialog({id: dialogId,title: obj.EVENTNAME,message: detailHtml,draggable: true,dataBackdrop: false,closeByBackdrop: false,closeByKeyboard: ...

Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出，并进行前段验证【代码】【图】

1.新建Controllerpublic ActionResult Index(){return View();}public ActionResult Person(int? id){//could add code here to get model based on id....return PartialView("_Person");//calling partial with existing model....//return PartialView("_Person", model);}[HttpPost][ValidateAntiForgeryToken]public ActionResult Person(PersonValidationViewModel model){if (!ModelState.IsValid){var errors = GetErrorsF...

bootstrap-data-target触发模态弹出窗元素【代码】【图】

1.运行效果如图所示650) this.width=650;" src="/upload/getfiles/default/2022/11/6/20221106025324688.jpg" title="QQ截图20170527101132.png" />2.实现代码如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>data-target触发模态弹出窗元素</title>  <link rel="stylesheet" href...

bootstrap弹出的模态框水平垂直居中的实现【代码】【图】

学习javascript从入门到放弃！，这是第一篇随笔，经验不足，如有不当之处，还望指出。好了废话不多说直接切入正题吧 1.bootstrap默认的model写法：//触发模态框的button <button data-toggle="modal" data-target="#myModal"type="button" class="btn btn-default">button </button> //弹出的模态框内容 <div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabe...

bootstrap之弹出框【代码】

1.模态框的核心在于首先声明一个模态框，标记其位置<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 2.将页面生成的html代码放到模态框中，我这边是在控制器中返回视图填充模态框，然后将模态框show出来即可 //作废function formInvalid(id) {$.ajax({type: ‘GET‘,url: "/DCC/FormFile/FormInvalid?Id=" + id + "&temp=" + Date.parse(new Date()),...

angularJS配合bootstrap动态加载弹出提示内容【代码】

1.bootstrp的弹出提示　　bootstrap已经帮我们封装了非常好用的弹出提示Popover。　　http://v3.bootcss.com/javascript/#popovers2.自定义popover指令　　我们使用一个指令给任意元素加上popover，并且可以根据情况改变popover的content内容。JS：<script>var app = angular.module(‘testApp‘, []);app.factory(‘dataService‘,function() {var service = {};service.cacheObj = {};service.getAppName = function (appId, cal...

Bootstrap无法弹出模态框的解决办法【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"></head><body><div class="container"><div style="padding: 20px 0"><a href="" class="btn btn-primary" data-toggle=‘modal‘ id="addBtn">添加</a> //a标签需要设置弹出对话...

JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示【代码】【图】

原文:JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作用，如果你的系统有一个友好的弹出提示框，自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件，这章来看看bootstrap里面弹出框和提示框的...

bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题【代码】

答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field$(‘#myModal‘).on(‘shown‘, function() {$(document).off(‘focusin.modal‘); });这个是国内同学的解决方法：http://www.oschina.net/question/226830_143869//显示modal $(‘#myModal‘).modal(‘show‘); //show完毕前执行 $(‘#myModal‘).on(‘shown‘, function () {//加上下面这句！解决了~$(document).off(‘...

安装office2013时弹出microsoft setup bootstrapper已停止工作,接着就不能安装了

只是说一下自己的解决方法：我的原因是注册表没有删除改进。1.输入regedit2.找到HKEY_LOCAL_MACHINE\software\microsoft\windows\CurrentVesion\Uninstall\(自己想卸载的)3.记得备份，以防选错！原文：http://www.cnblogs.com/boyiliushui/p/5046377.html

安装office2016时弹出microsoft setup bootstrapper已停止工作的解决办法【图】

安装office2016时安装进度条走到最后又回滚，弹出microsoft setup bootstrapper已停止工作，最后“安装出错”经过了1天的试尽了各种控制面板卸载、文件夹删除、office注册表删除等方法，最后用了以下方法才终于解决。希望没试过我这个方法的朋友们先试下这个方法。(⊙o⊙)… 确认启动Windows Event Log这个服务项。Windows系统的服务打开方式如下：在“运行”里输入services.msc，就可以打开了，或者通过计算机管理也可以找到。打开...

php-如何在yii-booster bootstrap小部件中创建gridView,并在其列之一中弹出按钮【代码】

我在Yii较新,我需要为Yii中的员工详细信息创建gridView,因为我已经遵循http://yii-booster.clevertech.biz/components.html#tables中提到的过程.而且我创建了一个带有一些示例数据的gridView,就像clevertech.biz所做的一样,我成功做到了.但是我的实际要求是制作一个带有弹出窗口的gridView,以便在删除条目之前查看和编辑员工详细信息以及JavaScript确认.这是我的代码,它创建了一个网格和一个弹出窗口,但是每个按钮的操作没有分开,弹...

在iframe中使bootstrap的在父页面弹出模态框方法详解【图】

这篇文章主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错，具有参考借鉴价值，需要的朋友可以参考下这几天在写项目的中，页面使用了iframe，然而在子页面中使用bootstrap的模态框时发现：弹出的模态框位置是以子页面为标准居中的，并且遮罩层也只有子页面那一部分，整个页面简直无法直视，所以思考可以可以让模态框以父页面为标准弹出，经过在网上查找资料，总结了一种解决方法。效果展示修改前页面修改...

首页 / BOOTSTRAP / 整理关于Bootstrap模态弹出框的慕课笔记

整理关于Bootstrap模态弹出框的慕课笔记

内容导读

内容图文

内容总结

内容备注

内容手机端

【整理关于Bootstrap模态弹出框的慕课笔记】教程文章相关的互联网学习教程文章

BOOTSTRAP - 相关标签

BOOTSTRAP - 技术教程分类

BOOTSTRAP - 最新教程

BOOTSTRAP - 最热教程