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

刀片中的代码如下:

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

最佳答案

后续操作将解决问题,并使模式回到中心

在HTML中添加class="modalcenter"

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


使用!important规则在样式表中添加以下CSS,以确保使用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%会将其拉到顶部

09-10 11:30
查看更多