如何在调用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 Modal之前显示所需的html？

需要的Html是这样的：

因此，在调用Bootstrap Modal之前，如果数据为空，系统首先需要显示html

非常感谢

Answer 1

首先，您必须从alert(parseInt("13 coins"));按钮中删除模态数据属性data-toggle="modal" data-target="#confirm-save"，否则当单击提交按钮时，模态将立即打开，

您可以验证输入，如果全部有效，则使用JavaScript触发模态

submit

示例代码

＆＃13;

＆＃13;

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

＆＃13;

$(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);
	}
});

＆＃13;

＆＃13;

＆＃13;

Fiddle