javascript - 由于 css 样式表链接，Bootstrap Modal 出现在屏幕右侧

Question

我有这段代码显示了一个引导模式：

function showmodal() {
  $("#ModalMSJ").modal("show");
}

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<button type="button" name="btnOcultarEncabezadoFactura" class="btn btn-xs btn-success" id="OcultarEncabezadoFactura" onclick="showmodal()" data-row-id="0">Show Modal</button>

<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    					  <span aria-hidden="true">&times;</span>
    					</button>
      </div>
      <div class="modal-body" style="color:black;" id="MSJ">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

问题是这部分：

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 

如果我删除该部分，模态将按预期工作。但问题是我需要那些 css 样式表。我该如何解决这个问题？

结果输出：

标签： javascriptjquerycssbootstrap-modal