CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user244394
user244394

Reputation: 13448

Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

I have a modal window which open up when the user focuses on search input box. but currently when the modal opens, the modal background overlay blocks it. How can i move the modal overlay background lower or something, so the user can still type on the search input box while the modal window stays opens .

<form>

    <input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>

<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
      <div class="row">
          <div class=" col-md-4">
            lorem i[p sum on left
         </div>

          <div class=" col-md-4">
            lorem ipsom on right
         </div>
      </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Upvotes: 1

Views: 97

Answers (3)

MTCoster
MTCoster

Reputation: 6145

Check the docs for jQuery activation of Bootstrap modals here.

You can show a modal without the backdrop by simply adding the data-backdrop attribute to the modal div and setting it to false:

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Upvotes: 0

paulalexandru
paulalexandru

Reputation: 9530

Just add this to your css:

.modal-backdrop {
    z-index: -1;
    opacity: 0 !important;
    width: 0px;
    height: 0px;
}

Upvotes: 1

James King
James King

Reputation: 1917

You can edit your CSS so the modal backdrop will never show:

.modal-backdrop {
    display: none;
}

Upvotes: 0

Related Questions