登录  /  注册
首页 > web前端 > js教程 > 正文

Bootstrap每天必学之模态框(Modal)插件_javascript技巧

php中文网
发布: 2016-05-16 15:03:42
原创
1411人浏览过

本节课我们主要学习一下 bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件。

一.基本使用
使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层)、
dialog(窗口声明层)、content(内容层)。在内容层里面,还有三层,分别为 header(头部)、body(主体)、footer(注脚)。
//基本实例

<!-- 模态声明,show 表示显示 -->
<div class="modal show" tabindex="-1">
  <!-- 窗口声明 -->
  <div class="modal-dialog">
    <!-- 内容声明 -->
    <div class="modal-content">
      <!-- 头部 -->
      <div class="modal-header">
        <button type="button" class="close"
        data-dismiss="modal">
          <span>&times;</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">
          注册
        </button>
        <button type="button" class="btn btn-primary">
          登录
        </button>
      </div>
    </div>
  </div>
</div>

登录后复制

如果想让模态框自动隐藏,然后通过点击按钮弹窗,那么需要做如下操作。

//模态框去掉 show,增加一个 id

<div class="modal" id="myModal">
//点击触发模态框显示

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  点击弹窗
</button>
//弹窗的大小有三种,默认情况下是正常,还有 lg(大)和 sm(小)

<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可设置淡入淡出效果

<div class="modal fade" id="myModal">
//在主体部分使用栅格系统中的流体


<!-- 主体 -->
<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        1
      </div>
    </div>
  </div>
</div>

登录后复制

二.用法说明
基本使用介绍结束之后,我们就来看下插件的各种重要用法。所有的插件,都是基于JavaScript/jQuery 的。那么,就有四个要素:用法、参数、方法和事件。
1.用法
第一种:可以通过 data 属性

//data-toggle

data-toggle="modal" data-target="#myModal"

登录后复制

data-toggle 表示触发类型
data-target 表示触发的节点

如果不是使用

来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号