无法在提交时获得 bootstrap 模态显示

Question

我尝试使用以下代码在用户输入数据并单击现有模式弹出窗口上的按钮后显示模式弹出窗口。谁能指出我做错了什么。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="css/theme.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
        <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script> 
       <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
  <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
</head>

<body>
<a href="#" data-toggle="modal" data-target="#AddPkgPrompt"><i class="fa fa-cube fa-4x"></i><h2>Add Package</h2></a>
<div class="modal fade" id="AddPkgPrompt" tabindex="-1" role="dialog" aria-labelledby="AddPkgPromptLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
 <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title text-center" id="AddPkgPromptLabel">Add Package</h2>
            </div>
            <form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmAddPkg">
             <div class="modal-body"> 
                    <div class="form-group">
                     <div class="col-sm-12">
                <div id="opnshp">
                                <input type="radio" id="1" name="rbshp" value="1" required /><label>1</label>
                                <input type="radio" id="2" name="rbshp" value="2" required /><label>2</label>
                   </div>
                     </div>
       </div>
                </div>              
             <div class="modal-footer">
              <div class="col-sm-offset-4 col-sm-8">
                     <button name="btnAddPkg" id="btnAddPkg" type="submit" class="clsAddPkg btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;Create</button>
              </div>
             </div>
            </form>
         </div>
    </div>
</div>
<div class="modal fade" id="RrsultModal" tabindex="-1" role="dialog" aria-labelledby="ResultModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
 <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h2 class="modal-title text-center" id="ResultModal">xx</h2>
            </div>
            <div class="ct_schpkgresult"></div>
         </div>
    </div>
</div>
<script>
$("#frmAddPkg").submit(function(e) {
  var shpid = get_radio_value();
  var dataString = '&shpid=' + shpid; 
   $.ajax({
          type: "GET",
          url: "t2.php",
             data: dataString,
    async: false,
             cache: false,
             success: function (data) {
              console.log(data);
      $('#LookupModal').modal('show'); /*TMP*/
     /*$('#AddPkgPrompt').modal('hide');*/
     /*window.location.replace("index.php");*/
             },
             error: function(err) {
              console.log(err);
             }
      });
 });
</script>
</body>
</html>

用户选择现有表单 "frmAddPkg" 上的单选按钮之一，然后单击触发 ajax 调用 t2.php 的按钮。 t2.php 可以正常工作。我只想添加行 $('#ResultModal').modal('show') 来显示结果，但在现有模态消失后没有显示任何内容。

Answer 1

也许添加e.preventDefault();避免表单被默认表单操作提交？

$("#frmAddPkg").submit(function(e) {
    e.preventDefault();
    ...
});

Answer 2

您可以像

这样使用您的模式

    <div class="modal fade" id="getCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
       <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" id="getCodeClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

但永远不要忘记调用 jquery 和 bootstrap 脚本插件。讯息

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

并且 ajax 成功

           success: function(msg) {
                $("#getCode").html(msg);
                $('#getCodeModal').modal({
                    backdrop: 'static',
                    keyboard: false
                  });
                $("#getCodeModal").modal('show');
            }

无法在提交时获得 bootstrap 模态显示

Can't get bootstrap modal show on submit

javascript

bootstrap-modal