如何在调用 Bootstrap Modal 之前显示所需的 html？

Question

演示是这样的：http://jsfiddle.net/oscar11/u4ynjkwa/2/

我的html代码是这样的：

<form action="#">
    <table>
        <tr>
            <td>First Name </td>
            <td>:</td>
            <td><input type="text" id="first_name" required></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>:</td>
            <td><input type="text" id="last_name" required></td>
        </tr>
        <tr>
            <td>Age</td>
            <td>:</td>
            <td><input type="text" id="age" required></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><input type="submit" value="Submit" id="submit" data-toggle="modal" data-target="#confirm-save"></td>
        </tr>
    </table>
</form> 

<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
            </div>

            <div class="modal-body">

                <table style="width:100%">
                    <tr>
                        <td style="width:30%">First Name</td>
                        <td height top="40" style="width:70%" id="first_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Last Name</td>
                        <td height="40" id="last_name_modal"></td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td height="40" id="age_modal"></td>
                    </tr>                 
                </table>        

                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save changes</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>  
            </div>
        </div>
    </div>
</div>

我的 javascript 代码是这样的：

$(document).on("click", "#submit", function () {
        var first_name_modal = document.getElementById("first_name").value;
        var last_name_modal = document.getElementById("last_name").value;
        var age_modal = document.getElementById("age").value;

        $('#first_name_modal').text(first_name_modal);
        $('#last_name_modal').text(last_name_modal);
        $('#age_modal').text(age_modal);
    });

如何在调用Bootstrap模态之前显示html？

Html 要求是这样的：

所以，在调用Bootstrap模态之前，如果数据为空，系统需要先显示html

非常感谢

Answer 1

首先，您必须从 submit 按钮中删除模态数据属性 data-toggle="modal" data-target="#confirm-save"，否则当点击提交按钮时模态会立即打开，

您可以验证输入，如果所有输入都有效，则使用 JavaScript

触发模态

$("#confirm-save").modal("show");

示例代码

$(document).on("click", "#submit", function() {
 var first_name = $("#first_name").val();
 var last_name = $("#last_name").val();
 var age_modal = $("#age").val();
 if (first_name == "") {
  alert("FirstName Required");
  return false;
 } else if(last_name=="") {
  alert("LastName Required");
  return false;
 } else if(age_modal=="") {
  alert("Age Required");
  return false;
 } else {
  $("#confirm-save").modal("show");
  $('#first_name_modal').text(first_name);
  $('#last_name_modal').text(last_name);
  $('#age_modal').text(age_modal);
 }
});

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<div class="row">
  <form action="#">
    <table>
      <tr>
        <td>First Name </td>
        <td>:</td>
        <td>
          <input type="text" id="first_name" required>
        </td>
      </tr>
      <tr>
        <td>Last Name</td>
        <td>:</td>
        <td>
          <input type="text" id="last_name" required>
        </td>
      </tr>
      <tr>
        <td>Age</td>
        <td>:</td>
        <td>
          <input type="text" id="age" required>
        </td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <!-- <td><input type="submit" value="Submit" id="submit"></td> -->
        <td>
          <input type="submit" value="Submit" id="submit" class="btn">
        </td>
      </tr>
    </table>
  </form>
</div>
<div class="modal fade hide" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
      </div>

      <div class="modal-body">
        <table style="width:100%">
          <tr>
            <td style="width:30%">First Name</td>
            <td height top="40" style="width:70%" id="first_name_modal"></td>
          </tr>
          <tr>
            <td>Last Name</td>
            <td height="40" id="last_name_modal"></td>
          </tr>
          <tr>
            <td>Age</td>
            <td height="40" id="age_modal"></td>
          </tr>
        </table>
        <p class="debug-url"></p>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save changes</button>&nbsp;
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>

Fiddle

如何在调用 Bootstrap Modal 之前显示所需的 html？

How to display html required before calling Bootstrap Modal?

html

javascript

jquery

modal-dialog

bootstrap-modal