Light-Year-Admin-Using-Iframe-v4
/
lyear_ui_modal.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>模态框 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">模态框</div></header>
        <div class="card-body">

          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            点击启动
          </button>

          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalLabel">模态框标题</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h6>滚动长内容</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
            点击启动
          </button>

          <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalLongTitle">模态框标题</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>《红楼梦》，中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说，又名《石头记》《金玉缘》。此书分为120回“程本”和80回“脂本”两种版本系统。新版通行本前80回据脂本汇校，后40回据程本汇校，署名“曹雪芹著，无名氏续，程伟元、高鹗整理”。后40回作者尚有争议，但是对于矮化甚至腰斩后40回的极端倾向也应保持警惕。</p>
                  <p>《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机 。</p>
                  <p>《红楼梦》的作者具有初步的民主主义思想，他对现实社会包括宫廷及官场的黑暗、封建贵族阶级及其家庭的腐朽，封建的科举制度、婚姻制度、奴婢制度、等级制度，以及与此相适应的社会统治思想即孔孟之道和程朱理学、社会道德观念等，都进行了深刻的批判，并提出了朦胧的带有初步民主主义性质的理想和主张。《红楼梦》以“大旨谈情，实录其事”自勉，只按自己的事体情理，按迹循踪，摆脱旧套，新鲜别致，取得了非凡的艺术成就。“真事隐去，假语村言”的特殊笔法更是令后世读者脑洞大开，揣测之说久而遂多。围绕《红楼梦》的品读研究形成了一门显学——红学。</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h6>居中显示</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
            点击启动
          </button>

          <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalCenterTitle">模态框标题</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h6>Tooltips工具提示和弹出提示框</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalTips">
            点击启动
          </button>

          <div class="modal fade" id="exampleModalTips" tabindex="-1" role="dialog" aria-labelledby="exampleModalTipsTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalTipsTitle">模态框标题</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <h6>模态框中的Popover弹出框</h6>
                  <p>单击 <a href="#!" role="button" class="btn btn-secondary popover-test" data-toggle="popover" title="标题" data-content="中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说，又名《石头记》《金玉缘》。">按钮</a> 会触发弹出窗口。</p>
                  <hr>
                  <h6>模态框中的Tooltips提示</h6>
                  <p><a href="#!" class="tooltip-test" data-toggle="tooltip" title="Tooltip">此链接</a> 和 <a href="#!" class="tooltip-test" data-toggle="tooltip" title="Tooltip">该链接</a> 在悬停时有工具提示</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h6>使用栅格</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalGrid">
            点击启动
          </button>

          <div class="modal fade" id="exampleModalGrid" tabindex="-1" role="dialog" aria-labelledby="exampleModalGridTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalGridTitle">模态框标题</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="container-fluid">
                    <div class="row">
                      <div class="col-md-4">.col-md-4</div>
                      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                    </div>
                    <div class="row">
                      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
                      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
                    </div>
                    <div class="row">
                      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-9">
                        Level 1: .col-sm-9
                        <div class="row">
                          <div class="col-8 col-sm-6">
                            Level 2: .col-8 .col-sm-6
                          </div>
                          <div class="col-4 col-sm-6">
                            Level 2: .col-4 .col-sm-6
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h6>变更模态框内容</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalChange" data-whatever="@mdo">打开模态框 @mdo</button>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalChange" data-whatever="@fat">打开模态框 @fat</button>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalChange" data-whatever="@getbootstrap">打开模态框 @getbootstrap</button>

          <div class="modal fade" id="exampleModalChange" tabindex="-1" role="dialog" aria-labelledby="exampleModalChangeLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="exampleModalChangeTitle">发送消息</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="form-group">
                      <label for="recipient-name" class="col-form-label">收件人:</label>
                      <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                      <label for="message-text" class="col-form-label">内容:</label>
                      <textarea class="form-control" id="message-text"></textarea>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
<pre class="mt-3">$('#exampleModalChange').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('whatever');
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    modal.find('.modal-body input').val(recipient);
})</pre>
          <hr>
          <h6>尺寸大小</h6>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">大模态框</button>

          <div class="modal fade bd-example-modal-lg" id="myLargeModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="myLargeModalTitle">大尺寸</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>

          <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">小模态框</button>

          <div class="modal fade bd-example-modal-sm" id="mySmallModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h6 class="modal-title" id="mySmallModalTitle">小尺寸</h6>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <h4>用法</h4>
          <p>模态插件通过数据属性或JavaScript按需切换您隐藏的内容。它将 <code>.modal-open</code> 加到了 <code>&lt;body&gt;</code> 上，以覆盖默认的滚动行为，并生成 <code>.modal-backdrop</code> 来提供点击区域，以便在动态模态窗外面点击一下就能移除模态。</p>
          <h5>使用数据属性</h5>
          <p>启动一个动态视窗而无需编写JavaScript，在控制元素上设置 <code>data-toggle="modal"</code>（如按钮），以及一个 <code>data-target="#foo"</code> 或 <code>href="#foo"</code> 来指定特定的动态视窗进行切换。</p>
          <pre>&lt;button type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;</pre>
          <h5>通过JavaScript</h5>
          <p>使用单行JavaScript调用ID为 <code>myModal</code>的动态模态框:</p>
          <pre>$('#myModal').modal(options)</pre>
          <h5>选项</h5>
          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th style="width: 10%;">名称</th>
                <th style="width: 20%;">Type类型</th>
                <th style="width: 10%;">默认值</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>backdrop</td>
                <td>boolean or the string <code>'static'</code></td>
                <td>true</td>
                <td>包括动态视窗背景元素，或者指定 <code>static</code> 在点击背景时不关闭动态模态框。</td>
              </tr>
              <tr>
                <td>keyboard</td>
                <td>boolean</td>
                <td>true</td>
                <td>按下 <kbd>esc</kbd> 时关闭动态视窗。</td>
              </tr>
              <tr>
                <td>focus</td>
                <td>boolean</td>
                <td>true</td>
                <td>初始化focus动态视窗。</td>
              </tr>
              <tr>
                <td>show</td>
                <td>boolean</td>
                <td>true</td>
                <td>初始化时显示模态。</td>
              </tr>
            </tbody>
          </table>
          <h5>方法</h5>
          <div class="callout callout-warning">
            <h6>异步传输与转换</h6>
            <p>所有的API方法都支持<strong>异步传输</strong>，且一旦 <strong>转换开始</strong>，在结束之前它们会返回给调用者，直到完成这个动画。另外， <strong>过渡</strong>组件上的方法将被忽略。</p>
            <p>请参阅<a href="https://getbootstrap.com/docs/4.0/getting-started/javascript/" target="_blank">JavaScript文档</a>以了解更多信息。</p>
          </div>
          <h6><code>.modal(options)</code></h6>
          <p>激活您的内容作为模态，将选项加入到 <code>object</code> 内。</p>
<pre>$('#myModal').modal({
    keyboard: false
})</pre>
          <h6><code>.modal('toggle')</code></h6>
          <p>手动切换动态模态框，在动态模态框实际显示或隐藏之前返回给调用者（即在 <code>shown.bs.modal</code> 或 <code>hidden.bs.modal</code> 事件发生之前)。</p>
          <pre>$('#myModal').modal('toggle')</pre>
          <h6><code>.modal('show')</code></h6>
          <p>手动打开动态模态框，在动态模态框实际显示之前返回给调用者（即在<code>shown.bs.modal</code> 事件发生前)。</p>
          <pre>$('#myModal').modal('show')</pre>
          <h6><code>.modal('hide')</code></h6>
          <p>手动隐藏动态模态框，在动态模态框实际隐藏之前返回给调用者（即在 <code>hidden.bs.modal</code> 事件发生前)。</p>
          <pre>$('#myModal').modal('hide')</pre>
          <h6><code>.modal('handleUpdate')</code></h6>
          <p>如果动态模态框在打开状态（比如在出现滚动条的情况下）重新改变高度，并调整模态窗的位置。</p>
          <pre>$('#myModal').modal('handleUpdate')</pre>
          <h6><code>.modal('dispose')</code></h6>
          <p>销毁一个元素的Modal。</p>
          <h5>事件</h5>
          <p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge">&lt;div class="modal"&gt;</code>).</p>
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th style="width: 15%;">Event事件类型</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>show.bs.modal</td>
                <td>
          	当调用show实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的<code>relatedTarget</code>属性。</td>
              </tr>
              <tr>
                <td>shown.bs.modal</td>
                <td>当模态框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的<code>relatedTarget</code>属性。</td>
              </tr>
              <tr>
                <td>hide.bs.modal</td>
                <td>当调用<code>hide</code>实例方法时，会立即触发该事件。</td>
              </tr>
              <tr>
                <td>hidden.bs.modal</td>
                <td>当模态框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。</td>
              </tr>
            </tbody>
          </table>
<pre>$('#myModal').on('hidden.bs.modal', function (e) {
    // do something...
})</pre>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$('#exampleModalChange').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('whatever');
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    modal.find('.modal-body input').val(recipient);
})
</script>
</body>
</html>