Tag Archives: modals

Bootstrap modal background doesn’t disappear when modal closes

This can happen in certain circumstances for a lot of reasons.  If you need a quick and dirty hack to get everything shut down (modal wise) in full, you can use:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

It’s overkill, but effective.

Share this post:
read more

Send data to a Bootstrap modal

How to send data to a Bootstrap modal on ‘shown’.  Works with multiple data points.

<a data-toggle="modal" data-id="whateverDataYouArePassing" href="#idOfModal" class="classOfThetrigger btn btn-default">Full Info</a>

$(document).on("click", ".classOfTheTrigger", function () {
   var rowID = $(this).data('id');
   $("#nameOfModal").load("../something/in/here");  
});

 

Share this post:
read more

Toggle / open / close a Bootstrap modal with jQuery

Short and sweet, the jQuery for opening and closing Bootstrap modals.

$(function () {
   $('#modal').modal('toggle');
});

 

Share this post:
read more

Using jQuery Autocomplete inside Bootstrap Modals

The default behaviour for jQuery autocomplete is to show the list of available tags behind the modal.  This can be remedied using the ui-front class inside one of the parent elements of the form.  The ui-front class is a built in jQuery class.

<form name="addMaterials" class="form-inline ui-front" id="addMaterials" method="post" action="#">
  <div class="form-group">
    <input type="text" size="40" class="form-control" id="MaterialID" name="MaterialID" placeholder="Add Materials">
    <button type="submit" class="btn btn-default" id="btnSearch">Search</button>
  </div>
</form>

The important bit is the [class=“form-inline ui-front ]

Share this post:
read more

jQuery – Bind events to opening and closing a Bootstrap modal

Cause an event to be triggered when opening and closing a Bootstrap (3+) modal window.

Modal Close:

$('#myModal').on('hidden.bs.modal', function () {
   // do something here
})

Modal Open:

$('#myModal').on('shown.bs.modal', function () {
   // do something here
})

 

Share this post:
read more