Try:

$(function(){
 $('.selector').click(function() {
   $('#timePopup').modal('show');
 });
});

Where .selector refers to a class or id in your span element.

In my case, I could fix it by adding css for the .modal-backdrop

.modal-backdrop {
  z-index: -1;
}

Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.

A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property.

$('.modal').on('shown.bs.modal', function() {
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

In this case, if you are OK with changing the DOM on modal shown:

$('.modal').on('shown.bs.modal', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($('.modal-backdrop'));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:

$('#myModal').appendTo("body").modal('show');

Or, if you launch modal using buttons, drop the .modal('show'); and just do:

$('#myModal').appendTo("body") 

This will keep all normal functionality, allowing you to show the modal using a button.

Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.

Just in case anybody else runs into a similar issue: I found taking the class "fade" off of the modal will prevent this backdrop from sticking to the screen even after the modal is hidden. It appears to be a bug in the bootstrap.js for modals.

Another (while keeping the fade effects) would be to replace the call to jQueryElement.modal with your own custom javascript that adds the "in" class, sets display: block, and add a backdrop when showing, then to perform the opposite operations when you want to hide the modal.

Simply removing fade was sufficient for my project.

Make sure that your initial call to $.modal() to apply the modal behavior is not passing in more elements than you intended. If this happens, it will end up creating a modal instance, complete with backdrop element, for EACH element in the collection. Consequently, it might look like the backdrop has been left behind, when actually you're looking at one of the duplicates.

In my case, I was attempting to create the modal content on-the-fly with some code like this:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Here, the HTML comment after the closing </div> tag meant that myModal was actually a jQuery collection of two elements - the div, and the comment. Both of them were dutifully turned into modals, each with its own backdrop element. Of course, the modal made out of the comment was invisible apart from the backdrop, so when I closed the real modal (the div) it looked like the background was left behind.