Make bootstrap modal draggable and keep background usable - javascript

I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to be able to continue using the page.
I was able to make the modal draggable with jquery-ui but I'm stuck on making the page usable while the modal is open. Tried several suggestions with CSS but none work quite as I'd like them to.
This makes the page usable but the modal is limited to only a part of the page: Bootstrap Modal - make background clickable without closing out modal
Same as this one: Enable background when open bootstrap modal popup
Is it possible to achieve this with bootstrap modal at all?
This is my JS:
$('#btn1').click(function() {
var modalDiv = $('#myModal');
modalDiv.modal({backdrop: false, show: true});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
JSFiddle link: https://jsfiddle.net/ntLpg6hw/1/

This is really cool!
I think all you need is a little css.
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
You should also add some jQuery to reset your modal position on button click.
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
Check out the Fiddle
Note: Facebook is now doing something similar with external newsfeed videos. If you scroll away from a video while watching it, it becomes a drag and drop video.
Basically, their video popup parent container is position: relative, and the direct child of that container is position: fixed. The same strategy is used here.

Related

Disable any interaction with div (click, drag, scroll)

I have a website with jQuery full page plugin. My mobile navigation opens so transforming main window to about 80% right and draggin to view the mobile menu.
Live preview (only mobile version)
I made clicking on .section toggle .menu-open class on header, but if user drags or scrolls on section the Full Page plugin functionality distorts the view of the window.
I need to disable any interaction with .section or siwtch the default interaction with toggleClass.
I've tried:
e.preventDefault - This disables the click on .section div to toggleClass menu-open
pointer-events: none - Doesn't work
But users can still interact with the section on the right (white div).
I want to allow them to click on it to toggle menu-open class, so the window would be taken back to their main view.
I want to disable ability to scroll or drag the section in order to prevent jQuery Full page recalculating window position and displacing the window while the mobile menu is open.
This is the code which I am using in jQuery to toggle the menu and toggle the menu when clicked on section:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
$('.section').click(function(e){
if ($('body').hasClass('menu-open')) {
$('body').toggleClass('menu-open');
};
});
I need to update this bit to detect if (user scrolls or drags '.section') prevent default jQuery Full Page functionality (slide to other section or slide) and just toggle the menu-open class.
Found a solution. Posted below.
Solution.
I've created a which is fixed with poisitioning fixed top: 0; right: 0; bottom: 0; width: 26%; background-image: linear-gradient(shadow from right to left gradient);
While menu is closed it's pointer-events: none; opacity: 0;
When menu is open it get's opacity: 1; pointer-events: all;
It absorbs any interaction from user and will act as a menu-open toggle button in jQuery. jQuery changed code below:
$('.mobile-shadow').click(function(e){
$('body').toggleClass('menu-open');
});

Hide dropdown when modal is showing

I have a small problem with my modal window and for some reason I can't figure this out.
On mobile, I have a hamburger menu and in that menu I have a Log In link which open a modal window.
Everything works and the modal is showing but the problem is: the dropdown menu is showing on top of my modal.
I tried to hide it using:
$(document).ready(function() {
var modal = $('.modal'); //get modal window
if(modal.hasClass("in")){ //check if it has class "in"
$('.navbar-toggleable-md').hide(); //true, hide navbar
}
}); // end ready
What am I missing? Because the code from above it's not doing anything..
You need to catch an event either show.bs.modal or shown.bs.modal on .modal. Something like this:
$(document).ready(function() {
$('.modal').on('shown.bs.modal', function (e) {
$('.navbar-toggleable-md').hide();
});
});
Read bootstrap docs: modals-events
I think there is a problem with z-index on our model. increase the z-index of your modal.
OR please provide us with fiddle of your code.
Set the z-index of your modal greater than the z-index of the dropdown.
In example:
.modal {
z-index: 999;
}
.dropdown {
z-index: 99;
}

How to detect clicks outside of a css modal? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
Im using a very simple and clean code to render a modal in my page:
<div class="modal">I'm the Modal Window!</div>
.modal {
/* some styles to position the modal at the center of the page */
position: fixed;
top: 50%;
left: 50%;
width: 300px;
line-height: 200px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: #f1c40f;
text-align: center;
/* needed styles for the overlay */
z-index: 10; /* keep on top of other elements on the page */
outline: 9999px solid rgba(0,0,0,0.5);
}
http://jsfiddle.net/c89Ls0av/
Is there a clean and reliable way to detect when somebody clicks outside of the modal?
Probably the simplest way is to bind click event to body and see if it comes from the element (e.target) which has parent (walk up the tree with closest method) .modal:
$(document).click(function(e) {
if (!$(e.target).closest('.modal').length) {
alert('click outside!');
}
});
Demo: http://jsfiddle.net/c89Ls0av/4/
By the way, overlay made with outline is an interesting idea, but it's not real overlay, as it still allows to interact with underlying page elements. Here is an example of the overlay made with div container covering entire page: http://jsfiddle.net/c89Ls0av/5/. This one will prevent page interaction when modal is visible.
And here is an example of how open/close functionality can be use together: http://jsfiddle.net/c89Ls0av/7/.
WithOut jQuery
document.addEventListener('click', function (e) {
if(e.target.className === 'modal'){
alert('clicked in');
}else {
alert('clicked out');
}
}, false);
check it out:
http://jsbin.com/totonopili/1/edit?html,css,js,output
With the help of a javascript framework this is quite easy.
Follow these steps:
Attach a click event to the document which closes or hides the modal.
Attach a separate click event to the window which stops click propagation.
Example:
$('html').click(function(){
$('.modal').hide();
});
$('.modal').click(function(e){
e.stopPropagation();
});
http://jsfiddle.net/c89Ls0av/3/
Warning! Stopping propagation can introduce strange behaviour
Dfsq answer will work fine.. but if you want something to do with dialog boxes you may have a look at jQuery ui dialog boxes. It gives you many options with dialog boxes which you can configure as per your needs.
http://jqueryui.com/dialog/

Slick.js and multiple Twitter Bootstrap Modal Windows

I have multiple modal window and inside have slick.js sliders. The problem is that the slider doesn't show up as if it doesn't have any height and you have to wait for awhile or click on the bullets for the image to show up.
One solution I got was to add a resize() when the modal is shown:
$('.modal').on('shown.bs.modal', function (e) {
$('.carousel').resize();
})
But this only solves the issue for one modal window's slider. If you click on the other modal, the slider will not show up again. Here's a js fiddle:
http://jsfiddle.net/vanduzled/nv446jgm/2/
I managed to get this to work with multiple modal windows with the following:
$('.modal').on('shown.bs.modal', function (e) {
$('.product-slider').slick("setPosition", 0);
});
above solution also worked but it not smooth try this it work like charm
.modal {
display: block;
visibility: hidden;
overflow-y: hidden;
}
.modal.in {
visibility: visible;
}
Hey man i think your solution is actually a very good one.
I changed it slightly, so i apply the slick carousel when the modal is shown:
$('.modal').on('shown.bs.modal', function (e) {
$('.carousel').slick();
})

javascript pop up and block screen

I have a div pop up window which appears on button click event. I want to disable the screen when the pop up is shown to the user and enable again when user closes the pop up by escape key or close button on div, like a regular dialog box. How can I do this by java script.
JQuery UI makes your life easier.
Have a look at jquery UI dialog
You can use jQuery dialog and use the attribute modal:true
$("#fileuploadfun").dialog({ modal: true });
If you use modal:false then you can click on background
You can create a "cover" element that covers the screen preventing input from the user, except with whatever is on top (or inside) the cover.
$('#button').click(function() { $('body').append('<div class="cover"></div>'); } );
.cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
You then assign events to the cover so when the user clicks it or presses a specific key, the cover is hidden.
$('.cover').click(function() { $(this).hide(); });
I highly recommend using a modal plugin/script, as doing it yourself requires significant effort and is time consuming (trust me).

Categories