How to remove dimmer and allow outside click for bootstrap modal

Hello, i m trying to remove dimmer from modal so user can click and use inputs outside bootstrap modal (draggable modal). I can remove it with $(".modal-backdrop.in").hide(); but i m still not able to click and use anything outside modal.

How to fix this? (bootstrap 3)

Here is my function that opens modal:

	function showPic(event) {
		event.preventDefault();
		
		var val = '';
		var val = $(event.currentTarget).data("pic");

		$.ajax({
			global: false,
			type: 'GET',
			url: 'someUrl.php?key='+val,
				
			success: function (result) {

				$('#showPic').modal({
					backdrop: 'static',   
					keyboard: false       
				});
				$('#showPic').modal('show');
				$(".modal-backdrop.in").hide();				
				
				$('.modal-body.forPic').html(result);
			},
			error: function (request, status, error) {
				serviceError();
			}
		});
		
	}

Thanks in advance!!

Hi @fumeeptc, well that contradicts the very definition of a modal…

Anyway if you want to turn it into a modeless window, you might pull the content out of the modal container…

$('#myModal').replaceWith(function () {
  return $(this).children()
})

… and then make it draggable, for instance using jQuery UI for a quick solution. However I’d suggest to set up your own draggable component from the start, rather than trying to mess with the originally intended modal behaviour.

I m not sure what you men by your code as it seems to just freeze my browser. …

But… I did it like this:

On my showPic() i trigger
$('#showPic').show();

Then i have:

  $(function() {
    $( "#showPic" ).draggable({stack: 'div'});
  });

And modified div with style="display: none; position:absolute; top: 123px; z-index: 100;" also removed modal class

and it seems to do the job now!

Ah sry I used the wrong ID… not sure how this would freeze the browser though. Anyway glad you got it working!

1 Like