我的刀片中有一个数据模型。单击“发送请求”按钮后,应该会出现一个弹出窗口。它当然会出现,但不是按预期的方式出现。它应该出现在窗口的中央。如果出现在左侧,只能看到其中的一部分。有人可以帮我解决这个问题吗???
刀片中的代码如下:
<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">×</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%
会将其拉到顶部