Question

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

<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>

因此，当我使用选择选项时，Modal窗口应该是打开的，这很好并且显示所有输入字段，但是它带有一个透明的黑色窗口，模态上的每个东西都是可见的，但是我无法选择输入任何细节，除非我在我的浏览器底部打开检查元素窗口，所以在检查窗口顶部有2英寸的间隙选择我的正常页面，很难解释，但请检查附加的图片capture screen 1，capture screen 2 < / p>

Answer 1

您的HTML结构应遵循Bootstrap Document

中提到的结构

<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 -->

Bootstrap JS Modal加载但不可编辑

1 个答案: