Bootstrap re-sizable modal with active background

You are working with Bootstrap modal. You have perfect modal. But when you want to provide your users more UX, that is not enough and needed modal with active background where modal and background still accessible to users. Then, you are at the right page.

I started working with modal and dialog (from Jquery-UI). Jquey-UI Dialog widget fits my functional need. But default UI is not gel-well with my UI. So decided to go with bootstrap modal. But achieving modal with active background is a not straight forward.

I got this method with trial-n-error and with few line of CSS. Happy reading!!!

Library versions

Bootstrap – 4.1.3
Jquery – 3.3.1
JQueryUI – 1.12.1

Create default bootstrap modal

If you are reading this, you might have familiar with basic-default modal working. So I am skipping this.

Remove dark-background

Next step you need to remove background black screen on the modal background.

data-backdrop="false"

Replace modal background with page body

This won't solve our problem. It just removes key-press and dark background. When modal is being used in bootstrap, bootstrap create background for modal and places where ever you specify. In this step, we are going to remove.

How? Simple. You need to remove “modal” class from your modal. Don't panic. This will make below changes to the modal.

Your modal will be visible in the main page. When the modal class is given, bootstrap.js hides modal by default. Now the modal background is your page body.

Positioning the modal

Now modal is visible and now positioned properly. We are going to use CSS for that. Add below class in your modal.

This CSS performs below task on your modal.

Places the modal in the middle as we removed modal class in JS next step. We need to position them manually.

So what now? Do you need to manually change the display, worry not. Bootstrap will take care of that.

.custom-modal{
/*Places modal center of the page*/
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
/* end */
}
.modal-dialog{
margin: 0;
}

Add resize and move to the modal

What next? Your main page and modal both are accessible. Modal performs normally as it is supposed to be.

But that is not enough when you need to active background. You need to resize and move to different place in the page. So that user can work easily.

JqueryUI will help you with that. You need to add JqueryUI.css and JqueryUi.js from CDN and add below piece of code in script section. I will explain the steps below.

Step 1 will setup the move and resize from JqueryUI.

Step 2 will sync the modal-content and modal-container. Why we need this? If we simply set the first step for container, you don’t need. Yes, that is correct. But The resize and drag was not proper. So simply went with this.

Step 3 will remove modal-open class from body and modal from modal-container. When the modal is activated, bootstrap.js will set this class to body and it will make it static which will prevent overflow scroll in the main page. So removed to make user-friendly.

/* 1. This is add resize and move*/
$('.modal-content').draggable().resizable();
/* 2. This will sync the modal-content and modal-container when dragging is stopped*/
$( ".modal-content" ).on( "dragstop", function( event, ui ) {
$(".custom-modal").css({
top: ' calc( ' + $(".custom-modal").css("top") + ' + ' + $(".modal-content").css("top") + ')' ,
left: ' calc( ' + $(".custom-modal").css("left") + ' + ' + $(".modal-content").css("left") + ')'
});
$(".modal-content").css({
top: '0px' ,
left: '0px'
});
} );
/* 3. This will remove the modal-open class from body*/
$("#smaplemodal").on('shown.bs.modal', function () {
$("body").removeClass("modal-open");
$(".custom-modal").removeClass("modal");
});

CodePen Example

Please click codepen demo link, in case if the below demo is not visible for you.


References

Bootstrap-modal-backdrop

JQueryUI-Widget


Please do comment in the comment section if you are stuck or you have some other tips. Happy coding!!!

Comments
We'll never share your email with anyone else.