Bootstrap模式是页面全宽
问题描述:
而不是屏幕中间的新弹出窗口,我的模态窗口显示在现有页面内容上方的全宽。任何想法如何解决?Bootstrap模式是页面全宽
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header"><h3>Add new event</h3></div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
答
bootstarp模式应该像下面,你缺少一些核心类的引导模态
<div class="modal fade" id="your id" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
//modal header
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>modal-body</p>
</div>
<div class="modal-footer">
//modal footer
</div>
</div>
</div>
你缺少模式-的台词
答
删除类hide
并从modal
容器style="display: none;"
并添加包装它的正确视图(了解更多关于Bootstrap modals)一样,
<div id="popupEventForm" class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
.....
</div>
</div>
</div>
片段,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#popupEventForm">
Launch demo modal
</button>
<div id="popupEventForm" class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
</div>
</div>
我不使用一个按钮。在jQuery中,我可以尝试像这样$('#myModal')。modal('toggle'); – user1224643
谢谢你们!我添加了$('#popupEventForm')。modal('toggle'); ,一切都很好。 – user1224643
确实很棒:) –