0

In my page, I have a bootstrap dialog once the user opens the dialog he can drag and resize the dialog. Also, I want that without closing the dialog the user can interact with the rest of the items in the page. So I searched and here and implemented the draggable and resizable features. But the problem is once the modal opens the background elements will disable. Once the modal close the background elements will active. I checked the css the z-index property is blocking the background elements interaction. I created a fiddle for the same.

$('.modal-dialog').draggable(); //for drag
$('.modal-content').resizable({}); //for resize

https://jsfiddle.net/kuoh639o/5/

Edit: I changed the fiddle and partially achieved the solution now. https://jsfiddle.net/kuoh639o/7/ Now the problem is modal's height and width was very larger than the modal content.

rebornx
  • 407
  • 6
  • 21

1 Answers1

1

"Modal" commonly means a popup, when open other items on the page will be disabled. This is the behavior of bootstrap modal component, hence the name.

If you don't want this behavior, since you have jQuery UI available you can use it's dialog component instead, which can be optionally made to behave like a modal if needed. The best part is that they are draggable and resizable by default.

Below is a simple demo using the same.

var $dialog = $('#dialog');

$dialog.dialog({
  autoOpen: false
});

$('#open').on('click', function() {
  $dialog.dialog('open');
});
<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button type="button" id="open">
  1st click here then drag and resize the modal
</button>
<br>
<br>
<button type="button">Next I want to click here without close the modal</button>

For some reason if someone wants to use a bootstrap component over jQuery UI dialog (I can't think of a good reason) I think their closest bet is popover component of bootstrap (Below demo has an issue with resizable, but should be fixable).

$('#open').popover({
  html: true,
  content: function() {
    return $('#template').html();
  },
  placement: 'bottom'
}).on('inserted.bs.popover', function() {
  $('.popover').draggable()
    .resizable();
});
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="open">
  1st click here then drag and resize the modal
</button>
<br>
<br>
<button type="button">Next I want to click here without close the modal</button>

<script type="text/tmplate" id="template">
  <div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="background-color: transparent;" data-backdrop="false" data-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Notes</h4>
        </div>
        <div class="modal-body">
          Sample text Sample text Sample text Sample text Sample text Sample text Sample text
        </div>
      </div>
    </div>
  </div>
</script>
T J
  • 42,762
  • 13
  • 83
  • 138
  • I can't use Jquery UI dialog. And I tried the popover it is also not feasible. I changed the fiddle and partially achieved the solution now. https://jsfiddle.net/kuoh639o/7/ The problem am facing now is the modal's height and width was very larger than the modal content. – rebornx Jun 29 '16 at 13:28
  • In the application we never used Jquery UI dialog, every popup were bootstrap. Also, if I used UIdialog the default style will be broke. – rebornx Jun 30 '16 at 04:56
  • @Rebornx I think it'll be better to style the UI dialog to look like the other bootstrap dialogues you're using than messing with the actual functionality... – T J Jun 30 '16 at 05:16
  • Ok, any css suggestion to easily convert Ui dialog to bootstrap modal style? – rebornx Jun 30 '16 at 06:35
  • @Rebornx Just inspect the header, body etc, find their jQuery UI class and change it's background, color, border etc? What part are you having trouble with making it look like BS modal? – T J Jun 30 '16 at 06:46
  • The problem is many custom style rules which rewrite classes like ui-widget-content (some of them are written with important attributes). I can't touch those because it may affect the application designs. So when I implement the Ui dialog, the dialog box's ui-dialog-titlebar got as blue background and the content was in black box. – rebornx Jun 30 '16 at 07:24