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

2024-12-13 12:33:51

好久没有发过自己的代码的状态了，今天编写代码感觉有力不从心了。不过慢慢的找回了感觉，正好朋友问了我一个问题，就是如何实现模态框。其实就是引用bootstrap插件来实现。下面通过本文给大家介绍下。

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。页面中的模态框一般分为注册模态框、变更模态框、删除（信息提示）模态框三种基本模态框。

好了看代码。更希望大家互相关注，留下您的宝贵意见

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Bootstrap 实例 - 模态框（Modal）插件</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
 h4{
  text-align: center;
 }
   .c-right{
  width:100%;
  height:130px;
  border: 1px solid #fff;
  background-color: #fff;
 }
 .foot a{
  text-decoration-line: none;
 }
 .one {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 margin-left: 35px;
 border-radius: 5px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .two {
 width: 65%;
 height: 40px;
 margin-top: 5px;
 border-radius: 5px;
 margin-left: 35px;
 color: #999;
 line-height: 40px;
 padding-left: 16px;
 border: 1px solid #e5e5e5;
}
 .login_submit {
 width: 62%;
 height: 25px;
 color: #fff;
 background: #FB5C5A;
 border: 0;
 margin-left: 45px;
 outline: none;
 border-radius: 3px;
}
 .footer{
   width: 100%；
  height:80px;
  border: 1px solid #333333;
  background-color:#333333;
  margin-left: 200px;
 }
 </style>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    <h4 class="modal-title" id="myModalLabel">
     网上辅导管理系统
    </h4>
   </div>
   <div class="modal-body">
    <div id="div2" class="div2 Absolute-Center">
    <div class="c-right">
    <div class="middle">
     <p><input type="text"id="username" class="one"name="username"placeholder="username"></p>
     <p><input type="password"id="" class="two" name="password"placeholder="password"></p>
    </div>
    <div class="foot">
     <p>
       <input type="submit" class="login_submit" id="btn2" value="登入"/>
     </p>
    </div>
    </div>
 </div>
   </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>
</body>
</html>

以上所述是小编给大家介绍的Bootstrap 模态框实例插件案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

使用bootstrap插件实现模态框效果

今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.min.js 是压缩后的版本. 我们在使用 bootstrap 的
Bootstrap 模态框(Modal)插件代码解析

Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my
Bootstrap每天必学之模态框（Modal）插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续一．基本使用使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
Bootstrap 模态框实例插件案例分析

好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了.不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框.其实就是引用bootstrap插件来实现.下面通过本文给大家介绍下. Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).页面中的模态框一般分为注册模态框.变更模态框.删除(信息提示
Bootstrap与Angularjs的模态框实例代码

先给大家展示下效果图,感兴趣的朋友参考下实现代码吧效果图如下所示: 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.
Bootstrap模态框案例解析

一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
Bootstrap 模态框（Modal）带参数传值实例

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现带参数的传递,查看数据的唯一性.例如下面窗体:点击任意一个模态框("回复"按钮),如果不做任何处理,则会出现回复混淆,甚至程序出错的情况. 为了实现其回复的唯一性和带参传值的功能,需要做以下处理实现的效果: 总结以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传
Bootstrap模态框(modal)垂直居中的实例代码

Bootstrap官网下载:http://v3.bootcss.com/ 今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着.最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去. 因为之前对Bootstrap也不是很熟悉,便开始b
BootStrap模态框闪退问题实例代码详解

模态框闪退到你还看不到模态框的内容呢,就屏幕灰了一下就是代码如下  <div class="container-fluid"> <form class="navbar-form navbar-center" role="Search"> <div class="form-group text-center col-sm-4"> <input typ
bootstrap模态框弹出和隐藏,动态改变中间内容的实例

引入文件 <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="style.css" rel="external nofollow" > <script src="jquery-1.12.4.min
bootstrap模态框实现拖拽效果

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
BootStrap模态框不垂直居中的解决方法

本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下解决问题:BootStrap自带的模态框不垂直居中解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v

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

相关推荐

随机推荐