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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
JS随机密码生成算法
Sep 23 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
document.getElementById介绍
2011/09/13 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Pyqt5实现英文学习词典
2019/06/24 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
家长对孩子评语
2014/01/30 职场文书
学生党员公开承诺书
2014/05/28 职场文书
大学生心理活动总结
2014/07/04 职场文书
新闻稿标题
2015/07/18 职场文书
2016年教代会开幕词
2016/03/04 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android