Bootstrap 模态框(Modal)插件代码解析


Posted in Javascript onDecember 21, 2016

Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图:

页面效果:

Bootstrap 模态框(Modal)插件代码解析

html+js:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>my love-用户登录</title>
 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/login.css">
 <link rel="stylesheet" href="css/register.css">
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/modal.js" type="text/javascript"></script>
</head>
<body>
 <div class="main">
  <form class="form-horizontal" action="index.html">
   <div class="form-group">
    <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名:</label>
    <div class="col-xs-7 col-md-7">
     <input type="text" class="form-control input-user-name" placeholder="请输入用户名......">
    </div>
   </div>
   <div class="form-group">
    <label class="col-xs-3 col-md-3 control-label no-padding-right">密   码:</label>
    <div class="col-xs-7 col-md-7">
     <input type="password" class="form-control password-user-name" placeholder="请输入密码......">
    </div>
   </div>
   <div class="form-group bottom-button">
    <div class="col-xs-offset-4 col-xs-3 col-md-3">
     <button type="button" class="btn btn-success login-success-button">登录</button>
    </div>
    <div class="col-xs-3 col-md-3">
     <!-- Button register-modal -->
     <button type="button" class="btn btn-info" data-toggle="modal" data-target="#register-modal">注册</button>
    </div>
   </div>
  </form>
  <!-- Modal -->
  <div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="register-modal-label">
   <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="register-modal-label">新用户注册:</h4>
     </div>
     <div class="modal-body">
      <div class="form-horizontal">
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">邮   箱:</label>
        <div class="col-xs-7 col-md-7">
         <input type="text" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">用户名:</label>
        <div class="col-xs-7 col-md-7">
         <input type="text" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">密   码:</label>
        <div class="col-xs-7 col-md-7">
         <input type="password" class="form-control">
        </div>
       </div>
       <div class="form-group">
        <label class="col-xs-3 col-md-3 control-label no-padding-right">确认密码:</label>
        <div class="col-xs-7 col-md-7">
         <input type="password" class="form-control">
        </div>
       </div>
      </div>
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-info register-button">注册</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
     </div>
    </div>
   </div>
  </div>
 </div>
 <script type="text/javascript">
  $(function() {
   $('.register-button').click(function() {
    document.location.href = "login.html";
   });
  });
 </script>
</body>
</html>

login.css

body {
 background: url(../image/sun.jpg) no-repeat;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}
.main {
 width: 365px;
 height: 200px;
 margin: 230px auto;
 /*border: 2px solid #3a9c08;*/
}
.form-horizontal {
 padding-top: 30px
}
.main>.form-horizontal>.form-group>.col-xs-3.col-md-3.control-label.no-padding-right {
 color: #fff;
}
label.control-label.no-padding-right {
 padding-right: 0;
 font-size: 17px;
}
.form-horizontal .form-group {
 margin-right: 0;
 margin-left: 0;
}
.form-group.bottom-button {
 padding-top: 10px;
}

register.css

.modal-dialog .modal-content .modal-header {
 background: url(../image/registerTop.png) no-repeat;
 -moz-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}
.modal-dialog .modal-content .modal-footer {
 background-color: #d5feff;
}

以上所述是小编给大家介绍的Bootstrap 模态框(Modal)插件代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
突发奇想的一个jquery插件
Nov 19 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
antd配置config-overrides.js文件的操作
Oct 31 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
清除输入框内的空格
Dec 21 #Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 #Javascript
jQuery延迟执行的实现方法
Dec 21 #Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 #Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 #Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 #Javascript
js编写三级联动简单案例
Dec 21 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
php 静态变量的初始化
2009/11/15 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python实现FM算法解析
2019/06/18 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
租房协议书怎么写
2014/04/10 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
校长一岗双责责任书
2015/05/09 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android