ブートストラップモーダルはページの全幅です

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> 

あなたはモーダル-dialougeが欠落しているブートストラップモーダルでいくつかのコアクラスが欠落している、次のようにする必要があり

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>