Question

我希望模式以给定的宽度和高度出现在屏幕的右端。但问题是，如果我在不同的屏幕上看到它，它会以不同的方式出现。

例如：在小屏幕中，模态是一半可见（另一半不可见），在大屏幕中，模态仅占3/4空间。

这是我的模态的HTML代码：

＆＃13;

div#myModal.modal.open {
  display: block;
  opacity: 1;
  transform: scaleX(1);
  top: 13vh !important;
  left: 129vh;
  width: 58vh;
  background-color: #37373b !important;
  height: 100%;
}

＆＃13;

<div id="myModal" class="valign-wrapper modal modalHeight" style="height:100%; overflow-x:hidden;">
  <div class="modal-content right">
    <div class="modal-header">
      <h4 class="modal-title" id="myModalLabel">Approval Form</h4>
      <button class="modal-close close dashboardClose" data-dismiss="modal" onclick="close()" aria-label="Close"><span aria-hidden="false">&times;</span></button>
    </div>
    <div class="modal-body modalHeight">
    </div>
  </div>

＆＃13;

Answer 1

以百分比形式提及上，左，宽度和高度。对于我的代码，以下修改工作

div#myModal.modal.open {
  display: block;
  opacity: 1;
  transform: scaleX(1);
  top: 15.1% !important;
   left: 70% !important;
  width: 30% !important;
  background-color: #37373b !important;
  height: 100%;
}

如何自定义物化模态

1 个答案: