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 $("").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) {
		var val = '';
		var val = $(event.currentTarget).data("pic");

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

					backdrop: 'static',   
					keyboard: false       
			error: function (request, status, error) {

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

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.