title: How to set bootstrap modal dialog with background elements active
body: <p>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.</p>
  
  <pre><code>$('.modal-dialog').draggable(); //for drag
  $('.modal-content').resizable({}); //for resize
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kuoh639o/5/" rel="nofollow">https://jsfiddle.net/kuoh639o/5/</a></p>
  
  <p>Edit: I changed the fiddle and partially achieved the solution now.
  <a href="https://jsfiddle.net/kuoh639o/7/" rel="nofollow">https://jsfiddle.net/kuoh639o/7/</a>
  Now the problem is modal's height and width was very larger than the modal content.</p>