CODEWITHSUNDEEP
jqueryrazorbootstrap-modal
petercli
petercli

Reputation: 693

Bootstrap modal is full width of page

Instead of a new popup window in middle of screen, my modal window appears full width above the existing page content. Any ideas how to fix ?

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

Upvotes: 0

Views: 1478

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Remove class hide and style="display: none;" from your modal container and add wrappers for its proper view (Read more about Bootstrap modals) like,

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

Snippet,

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

Upvotes: 1

this.girish
this.girish

Reputation: 1306

bootstarp modal should be like following, you are missing some core classes in bootstrap modals

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

you are missing modal-dialouge

Upvotes: 0

Related Questions