Bootstrap JS模式加载，但不可编辑

Bootstrap JS Modal loading but not editable

本文关键字：编辑 JS 模式 加载 Bootstrap      更新时间：2023-09-26

我使用JavaScript加载Bootstrap Modal，$('#myModaltictacgame').modal();和HTML Form，table中有input的详细信息，所以我的模态代码看起来像这个

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
 <!-- Modal content-->
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;      </button>
            <span>my modal</span>
        </div>
        <div class="modal-body table-responsive">
        <table...>    
         <form ....>
           <input ...>
            ...
        </form>
        </table>
       </div>..
        ..
 </div>

因此，当我使用选择选项时，模态窗口应该是打开的，这很好，可以显示所有输入字段，但它有一个透明的黑色窗口，模态上的每一件事都是可见的，但我不能选择任何细节的输入，除非我打开浏览器底部的检查元素窗口，所以在检查窗口顶部有2英寸的间隙来选择我的正常页面，很难解释，但请检查所附图片捕获屏幕1，捕获屏幕2

您的HTML结构应该遵循引导文档中提到的结构

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>            
      </div>
      <div class="modal-body">
        //put your stuff inside the modal-body div
        <form ....>
        <table...>
        <input ...>
          ...
        </table>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
相关文章：