Two modal box methods of BootStrap

1. Method 1: Attribute trigger in button

Note: The data-target content in the button should be consistent with the id in the popup layer

data-target=”#mymodal-data”——– id=”mymodal- data”
 <!--Bind the attributes on the button to trigger the popup layer-->
 <button class="btn btn-primary delete" data-toggle="modal"
     data-target="#mymodal-data" data-whatever="@mdo">
      Revise
</button>
<!-- Modal popup content -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Popup layer title</h4>
      </div>
      <div class="modal-body">
        <p>The main content of the pop-up layer</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

2. Method 2: Binding through js

Note: Assign the id of the button and the id of the popup layer to $m_btn and $modal respectively. When $m_btn is clicked, $modal pops up.

<button class="btn btn-info" type="button" id="y-modalBtnAdd" > <label >添加</label></button>
<!-- Modal popup content -->
<div class="modal" id="y-myModalAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Popup layer title</h4>
      </div>
      <div class="modal-body">
        <p>Triggered by js binding button and popup layer</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
<!--js code-->
<script type="text/javascript"> 
  $( function (){
     // dom is loaded 
    var $m_btn = $('#y-modalBtnAdd');   // y-modalBtnAdd is the id of the button 
    var $modal = $( '#y-myModalAdd');   // y-myModalAdd is the id of the pop-up mask layer, which is bound by these two ids 
    $m_btn.on('click', function (){
      $modal.modal({backdrop: 'static'});
    });
  });
 </script>

3. Method 3: Click on a row of the table to pop up a pop-up layer

Dynamically add a pop-up trigger attribute to the tr tag

<!--Form-->
<table class="table table-bordered " style="width: 400px">
  <thead>
    <tr>
      <th>一</th>
      <th>二</th>
      <th>三</th>
    </tr>
  </thead>
  <tbody class="tableBody">
    <tr>
      <td>one</td>
      <td>two</td>
      <td>three</td>
    </tr>
    <tr>
      <td>four</td>
      <td>five</td>
      <td>six</td>
    </tr>
  </tbody>
</table>
<!-- Modal popup content -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Popup layer title</h4>
      </div>
      <div class="modal-body">
        <p>Click on a row of the table to pop up a pop-up layer</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
<!--js code-->
<script type="text/javascript">
  $(function () {
    $(".tableBody>tr").each(function () {
      $(this).on("click",function () {
        $(this).attr({"data-toggle":"modal","data-target":"#mymodal-data","data-whatever":"@mdo"});
      })
    });
  });
</script>