• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Bootstrap4 弹框

Data: 2019-06-02 12:11:05Form: JournalClick: 7

# 弹框

# 一、警告框

# 1、警告框颜色

参数描述
.alert警告框样式
.alert-primary重要的操作信息
.alert-success成功颜色
.alert-info信息颜色
.alert-warning警告颜色
.alert-danger危险颜色
.alert-dark深色
.alert-light浅色
<div class="alert">
    <strong>警告框!</strong>
</div>
<div class="alert alert-success">
    <strong>成功颜色!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-primary">
    <strong>重要的操作信息!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info">
    <strong>信息颜色!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-warning">
    <strong>警告颜色!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-danger">
    <strong>危险颜色!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-dark">
    <strong>深色!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-light">
    <strong>浅色!</strong> 指定操作成功提示信息。
</div>

# 2、关闭按钮

  • alert-dismissible 将在警告框（alert）组件的右侧增加额外的空间并放置关闭按钮
  • data-dismiss="alert" 在关闭按钮上添加该属性，该属性会触发 JavaScript 代码。务必使用  元素，以确保在所有设备上都具有正确的行为。
  • 提示: &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"
<div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功颜色!</strong> 指定操作成功提示信息。
</div>

# 3、动画

  • fade
  • show
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功颜色!</strong> 指定操作成功提示信息。
</div>

# 4、其他文本

  • alert-link 粗字体 700
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <h2 class="alert-heading">你好！</h2>
    <p>
        欢迎来到
        <a href="http://www.php.cn" class="alert-link" target="_blank">php中文网</a>
    </p>
    <hr />
    <div>希望你能学有所成。</div>
</div>

# 5、js 触发行为

<body>
    <nav class="navbar navbar-expand navbar-light bg-light">
        <a class="navbar-brand" href="#">logo</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">产品</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">登录</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">注册</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        <h2 class="text-center mt-5">注册</h2>
        <form>
            <div class="form-group">
                <label for="account">账号:</label>
                <input type="text" class="form-control" id="account" />
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" class="form-control" id="password" />
            </div>
            <label for="password">省市区:</label>
            <div class="form-group input-group">
                <select class="form-control">
                    <option value="0">请选择</option>
                    <option value="1">北京</option>
                    <option value="2">安徽</option>
                    <option value="3">河南</option>
                    <option value="4">江苏</option>
                    <option value="5">湖北</option>
                    <option value="6">湖南</option>
                </select>
                <select class="form-control">
                    <option value="0">请选择</option>
                </select>
                <select class="form-control">
                    <option value="0">请选择</option>
                </select>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                <input type="checkbox" class="form-check-input" value="1" />
                同意注册协议
                </label>
            </div>
            <button type="submit" class="btn btn-success btn-block" id="login">
                登陆
            </button>
            <div class="mt-4 row">
                <div class="col-6">
                <button type="submit" class="btn btn-danger">忘记密码</button>
                </div>
                <div class="col-6 text-right">
                <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </div>
            <div class="alert alert-danger mt-5" id="danger">
                <button type="button" class="close" data-dismiss="alert">
                &times;
                </button>
            </div>
        </form>
    </div>
</body>
  • .alert() 关闭警告框
$("#login").click(function () {
  let html = "";
  let account = $("#account").val();
  if (!account) {
    html += '<div class="alert alert-danger alert-dismissible">';
    html += '  <button type="button" class="close" data-dismiss="alert">';
    html += "    &times;";
    html += "  </button>";
    html += " <strong>错误!</strong> 请输入账号。";
    html += "</div>";
    $("#danger").html(html);
    setTimeout(function () {
      $(".alert").alert();
    }, 2000);
  }
});

# 十五、模态框

  • 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

# 1、创建模态框

  • data-toggle="modal" js 打开模态框
  • data-target="#modal" 对应的模态框 id
  • modal 模态框样式
  • fade 动画效果
  • modal-dialog 响应式样式
  • modal-content 模态框内容样式
  • modal-header 模态框头部
  • data-dismiss="modal" 关闭效果可以使用
  • modal-title 模态框标题
  • modal-body 模态框主体
  • modal-footer 模态框底部
<a href="javascript:" data-toggle="modal" data-target="#modal"> 查看协议</a>

<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h3 class="modal-title">注册协议</h3>
        <button type="button" class="close" data-dismiss="modal">
          &times;
        </button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        <p>php中文网-免费的PHP在线学习、交流公益平台。</p>
        <p>php中文网目前注册会员70万+，网站每天有十几万人在线学习！</p>
        <p>
          网站包含免费的php学习视频、php资料、php问答社区，我们立志要把php中文网打造成中国知名的，专业的php学习网站！
        </p>
        <p>
          尽我们所能，让更多的人掌握php技术，实现自己的梦想！因情怀而生，因情怀而壮大，2020年再次砥砺前行！
        </p>
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          关闭
        </button>
      </div>
    </div>
  </div>
</div>

# 2、滚动内容

  • modal-dialog-scrollable 在 modal-dialog 上增加
<div class="modal-dialog modal-dialog-scrollable"
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>