Question

我的刀片中有一个数据模型。一旦单击“发送请求”按钮，弹出窗口就会出现。当然会出现，但不是按照预期的方式出现。它应该出现在中心窗户。但它没有。如果出现在左边，只能看到它的一部分。任何人都可以帮我解决这个问题???

刀片中的代码如下：

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

使用!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;
}

SideNote：您可以在屏幕上调整模态的位置

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

如何更改数据模式的位置？

1 个答案: