Bootstarp4モジュール枠

モーダルブロック（モーダル）は、サブフォームの親フォームで覆われています。典型的には、目的は、単一のソースからのコンテンツを表示することで、親フォームを逸脱することなく、いくつかの相互作用があるかもしれません。子フォームは、その上の情報交換などを提供することができます。

1：モーダルボックスを作成する方法

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
  < タイトル>ブートストラップ实例</ タイトル> 
  < メタのcharset = "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1" > 
  < リンクのrel = "スタイルシート" のhref = "https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css" > 
  < スクリプトSRC = "HTTPS：//cdn.staticfile .ORG / jqueryの/ 3.2。> 
  < スクリプトSRC = "https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js" > </ スクリプト> 
  < スクリプトSRC = "HTTPS：//cdn.staticfile。 ORG / Twitterのブートストラップ/ 4.1.0 / JS / bootstrap.min.js」> </ スクリプト> 
</ ヘッド> 
< 身体> 

< divのクラス= "コンテナ" > 
  < h2の>模态框实例</ H2 > 
  < ！ - 按钮：用于打开模态框- > 
  < ボタンタイプ= "ボタン"クラス= "BTNのBTN-プライマリ"データトグル= "モーダル" データ・ターゲット= "＃myModal" > 
    打开模态框
  </ ボタン> 
   
  <！ - 模态框- > 
  < divのクラス= "モーダルフェード" ID = "myModal" > 
    < div要素クラス= "モーダルダイアログ" > 
      < divのクラス= "モーダル・コンテンツ" > 
   
        <！ - 模态框头部- > 
        < divのクラス= "モーダル・ヘッダ" > 
          < h4をクラス= "モーダル・タイトル" >モーダル・ブロック・ヘッダ</ H4 > 
          <ボタンの種類は=「ボタン」クラス=「クローズ」データ・解任=「モーダル」> ＆回; </ ボタン> 
        </ divの> 
   
        <！ - 模态框主体- > 
        < divのクラス= "モーダル・ボディ" > 
          模态框内容... 
        </ divの> 
   
        <！ - 模态框底部- > 
        < divのクラス= "モーダル・フッタ" > 
          < ボタンタイプ= "ボタン" クラス= "BTN BTN-二"ボタン> 
        </ DIV > 
   
      </ DIV > 
    </ DIV > 
  </ DIV > 
  
</ DIV > 

</ ボディ> 
</ HTML >

 

2：ブロックサイズモード

私たちは大きなモーダルボックスを作成することができ.modal-SMクラス、.modal-LGクラスを追加することにより、小型のモーダルボックスを作成することができます。

大きさに基づいて、< DIV > .modal-ダイアログ要素カテゴリの後に：

小さなフレームモード

<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>

 

大模态框

<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>