带有fade类的Bootstrap Modal无法正常显示隐藏，代码存在什么问题？

问题原因 #

• 1. 模态框HTML结构错误
     Bootstrap模态框要求modal-footer必须是modal-content的直接子元素，你的代码提前闭合了modal-content、modal-dialog-centered、modal容器，导致modal-footer脱离了模态框结构，破坏了Bootstrap模态框的默认结构规则，会直接导致组件初始化失败。
• 2. JavaScript语法错误
     你的JS代码缺少闭合大括号，$(document).ready、$("#submitBtn")的点击回调都没有正确闭合，代码执行报错会直接中断后续逻辑。同时你把$("#hideModal")的点击事件绑定放在了$("#submitBtn")的点击回调内部，每次点击提交按钮都会重复绑定隐藏事件，属于逻辑隐患。
• 3. 按钮默认行为冲突
     模态框内的#hideModal按钮是type="submit"，如果外层有form标签，点击会触发表单提交刷新页面，导致模态框刚弹出就被刷新重置。
• 4. 依赖遗漏
     Bootstrap模态框依赖jQuery和Bootstrap的JS文件，需要确保在你的脚本之前按顺序引入了这两个资源，否则modal()方法不存在无法调用。

修复后的代码 #

视图代码修正 #

<div class="modal modal-top fade" id="showModal">
  <div class="modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><span class="font-weight-bold">Add City of choice</span></h4>
        <button id="btn" type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
      </div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group col">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" placeholder="Enter City" required name="name" value="" />
          </div>
          <div class="form-group col">
            <label class="form-label">Rate</label>
            <input type="number" class="form-control" placeholder="Enter Rate" required name="rate" value="" />
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Min Order</label>
          <input type="number" class="form-control" placeholder="Enter Min Order" name="minOrder" value="" />
        </div>
        <div class="form-group mt-3">
          <label class="switcher">
            <input type="checkbox" class="switcher-input" name="allowFree" value="" />
            <span class="switcher-indicator">
              <span class="switcher-yes"></span>
              <span class="switcher-no"></span>
            </span>
            <span class="switcher-label">Free Delivery</span>
          </label>
        </div>
        <!-- 修改按钮type避免提交表单 -->
        <button id="hideModal" type="button" class="btn btn-primary button button4">Submit</button>
      </div>
      <!-- modal-footer移到modal-content内部 -->
      <div class="modal-footer">
        <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

脚本代码修正 #

<script type="text/javascript">
$(document).ready(function () {
  $("body").on("change", "#ddlStates", function () {
    $("#hfStateName").val($(this).find("option:selected").text());
  });

  // 合并重复的submitBtn点击事件
  $("#submitBtn").click(function () {
    var value = $("#selectedState").val();
    $('#ListSubmit').append(value);
    // 显示模态框
    $("#showModal").modal("show");
  });

  // 把hideModal的事件绑定移到外面，避免重复绑定
  $("#hideModal").click(function () {
    $("#showModal").modal("hide");
  });
});
</script>

内容的提问来源于stack exchange，提问作者Steve Olorundare