javascript - 如何更改数据模态的位置？

Question

我的 Blade 中有一个数据模型。单击“发送请求”按钮后，应该会出现弹出表单。当然它会出现，但不是以预期的方式。它应该出现在窗口的中央。但是不是的。如果出现在左边，只能看到一部分。谁能帮我解决这个问题吗？？？

Blade 中的代码如下:

<div class="modal fade" id={{'E'.$result->id}} tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model">
<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" id="myModalLabel">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            Send Request for Editing
        </h4>
  </div>
  <div class="modal-body">

      <div class="alert alert-info" role="alert" style="text-align: center"><b>{{ $result->school_name }} </b></div>
      @if($result->Edittable == 'Requested')
          <div class="alert alert-warning" role="alert" style="text-align: center"><b>This School has been already Requested for Editing. Please Proceed only if this is your first request</b></div>
      @endif


      <form method="post" action="{{ url('school_edit_request') }}">

          <!--
           @if( $msg_typ != NULL )

              @if($msg_typ == 'Success')
                      <strong>{{$msg}}</strong>
                  </div>
              @elseif($msg_typ == 'Failed')
                  <div class="alert alert-danger" role="alert" style="text-align: center" >
                      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                     <strong>{{$msg}}</strong>
                  </div>
              @endif
           @endif -->

          <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <input type="hidden" name="School_Id" value="{{ $result->id }}">
          <input type="hidden" name="Request_By" value="{{  Auth::user()->id }}">
          <input type="hidden" name="Request_Date" value="{{ date('Y-m-d') }}">
          <input type="hidden" name="Status" value="Pending">

          <br />
          <label class="control-label" >Reason For Editing</label>
          <select class="form-control" name="Reason" >
              <option>Incorrect School Details </option>
              <option>Incorrect Principal Details </option>
              <option>Change in teacher in charge</option>
              <option>Change in No, of traffic controllers</option>

          </select>
          <br />
          <label class="control-label" >Request Priority</label>
          <select class="form-control" name="Priority" >
              <option>High</option>
              <option>Medium</option>
              <option>Low</option>
          </select>
          <br />
          <label class="control-label" >Additional Note</label>
          <textarea class="form-control" rows="3" name="Note" required="required" data-parsley-error-message="Please Enter At least One line of Description "></textarea>
          <br />
          <button type="submit" class="btn btn-success ">Send Request</button>
      </form>
  </div>
  <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
  </div>
  </div>

Answer 1

以下将解决问题并将模态带回中心

在 HTML 中添加 class="modalcenter"

<div class="modal modalcenter fade" id={{'E'.$result->id}} tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

在样式表中添加以下 CSS，使用 !important 规则来确保将模式向左推的内容将被 modalcenter 选择器属性覆盖。

.modalcenter {
    -webkit-transform: translateX(0%) translateY(5%) !important;
    -moz-transform: translateX(0%) translateY(5%) !important;
    -ms-transform: translateX(0%) translateY(5%) !important;
    transform: translateX(0%) translateY(5%) !important;
}

旁注:您可以调整模态框在屏幕上的位置

• (从左到右之间)通过将 translateX(0%) 的值设置为正值，例如 5% 会将其推向右侧
• (从右到左之间)通过将 translateX(0%) 的值设置为负数，例如 -5% 会将其推向左侧
• (从上到下之间)通过调整 translateY(0%) 正值，例如 5% 会将其推向底部
• (从下到上之间)通过调整 translateY(0%) 负数的值，例如 -5% 会将其拉向顶部