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

从hide容器中删除类style="display: none;"和modal，并为其正确的视图添加包装器（阅读有关Bootstrap modals的更多信息），例如

<div id="popupEventForm" class="modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            .....
        </div>
    </div>
</div>

代码段，

＆＃13;

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

＆＃13;

Answer 2

bootstarp模式应该如下，你在bootstrap模态中缺少一些核心类

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

你缺少modal-dialouge

Bootstrap模态是页面的全宽

2 个答案: