Bootstrap模式是页面全宽

Question

而不是屏幕中间的新弹出窗口，我的模态窗口显示在现有页面内容上方的全宽。任何想法如何解决？

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

Answer 1

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> 

你缺少模式-的台词

Answer 2

删除类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>