Question

我正在创建一个模式，单击表行时应显示该模式。当我使用Bootstrap 2.x时，它可以正确显示，但是当使用Bootstrap 3.x时，模式在笔记本电脑显示屏的最左端移动，并且只能查看一半。我不擅长设计，可以帮我解决这个问题。

    <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>

    <div class="modal fade" id="monitor-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>


$("#tableId").on("click", "tr", function(e) {
    $("#tableId").find("tr.highlight").removeClass("highlight");
    $(this).addClass("highlight");
    columns = e.currentTarget.getElementsByTagName("td");
    isSelectedMachineVacant = columns[columns.length-1].childNodes[0].className.indexOf("label-success") > -1

    if (isSelectedMachineVacant) {
        $("#temp").val("");
        $("#fan-val").val("");
        $("#heater-val").val("");
        $("#test-modal").modal();
    }
    else {
        $("#monitor-modal").modal();
        getLogs();
    }
});

Answer 1

此链接应帮助您创建以正确方式显示https://www.w3schools.com/bootstrap/bootstrap_modal.asp的模式。

还逐步解释了所有内容。

使用bootstrap 3文档的简单模态示例代码

另外，您还必须在页脚中导入jquery和bootstrap.js

    <div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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模态无法正确显示

1 个答案: