24422

what does bootstrap use to make backdrop passive

Question:

I am trying to create a Bootstrap-like modal using only CSS and jQuery, without Bootstrap. But after launching the modal, the backdrop is still active. What can I do to make it passive so that while scrolling, only the modal content scrolls, and if one clicks outside the modal window, it gets closed? Please share your suggestions. Below is my code snippet.

<pre class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $(".modal").hide(); let flag = 0;//hidden $("#launch-button").click(function(){ $(".modal").slideDown(200, function() { $(".bg-body").click(function(){ $(".modal").slideUp(200); flag = 0;//hidden $(".bg-body").css("opacity","initial"); }); }); flag = 1;//visible $(".bg-body").css("opacity","0.3"); }); $("#save-btn").addClass("close-button") $(".close-button").click(function(){ $(".modal").slideUp(200); flag = 0;//hidden $(".bg-body").css("opacity","initial"); }); }); <pre class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; font-family: Lato, sans-serif; } .overlay{ /*background-color: #000; opacity: 0.1;*/ /*display: flex; justify-content: center; align-items: center;*/ } .modal{ width: 34%; position:fixed; left: 33vw; border: 1px solid #b0b0b0; border-radius: 5px; padding:2vh 2vw; } .modal-header{ display: flex; align-items: center; } #close-icon{ margin-left: auto; } .modal-body{ margin: 0; padding-top: 2vh; padding-bottom: 2vh; } .modal-footer{ display:flex; align-items: center; justify-content: flex-end; } #close-button{ margin:1vh 0.8vw; } button{ font-size: 1rem; background-color: transparent; border: 1px solid #000; border-radius: 5px; padding: 1vh 0.8vw; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <title>modal</title> </head> <body> <div class="bg-body">

Click here to launch a sample modal made without using Bootstrap.

<div id="launch"> <button id="launch-button"> Launch Sample Modal </button> </div> </div> <div class="overlay"> <div class="modal"> <div class="modal-header"> <h3 class="">Modal Title</h3> <button class="close-button" id="close-icon"><i class="fas fa-times"></i></button> </div> <hr> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <hr> <div class="modal-footer"> <button class="close-button" id="close-button">Close</button> <button id="save-btn">Save changes</button> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="index.js"></script> </body> </html>

Answer1:

It usually makes the overlay cover the screen:

<pre class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { var $overlay = $('.overlay'), $modal = $(".modal"); // put these in vars as you use them multiple times so it will be better performance $("#launch-button").on('click', function() { // show overlay and modal $overlay.show(); $modal.slideDown(200); }); // hide overlay and modal when overlay or close buttons clicked $overlay.on('click', hideModal); $('.close-button').on('click', hideModal); $modal.on('click', function(e) { // stop click events on modal bubbling up to overlay (stops the overlay click event firing when modal is clicked on) e.stopPropagation(); }); function hideModal() { // hide modal and overlay $modal.slideUp(200, function() { $overlay.hide(); }); } }); <pre class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; font-family: Lato, sans-serif; } .overlay { /* make overlay cover whole body */ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); overflow: auto; } .modal { /* start off hidden with css so it doesn't flash when loading */ display: none; width: 34%; border: 1px solid #b0b0b0; border-radius: 5px; padding: 2vh 2vw; background: white; /* centre modal may need a media query to remove transform on smaller screen heights */ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .modal-header { display: flex; align-items: center; } #close-icon { margin-left: auto; } .modal-body { margin: 0; padding-top: 2vh; padding-bottom: 2vh; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; } #close-button { margin: 1vh 0.8vw; } button { font-size: 1rem; background-color: transparent; border: 1px solid #000; border-radius: 5px; padding: 1vh 0.8vw; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <title>modal</title> </head> <body> <div class="bg-body">

Click here to launch a sample modal made without using Bootstrap.

<div id="launch"> <button id="launch-button"> Launch Sample Modal </button> </div> </div> <div class="overlay"> <div class="modal"> <div class="modal-header"> <h3 class="">Modal Title</h3> <button class="close-button" id="close-icon"><i class="fas fa-times"></i></button> </div> <hr> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <hr> <div class="modal-footer"> <button class="close-button" id="close-button">Close</button> <button id="save-btn">Save changes</button> </div> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="index.js"></script> </body> </html>

Recommend

  • ANTLR4: Extraneous Input error
  • How to make one column to take all the remaining width?
  • why am I stuck in an infinite loop after invoking poll() or remove() on a priority queue? Java
  • Batch file read in var and write back
  • PySpark Yarn Application fails on groupBy
  • Docker container for google cloudML on compute engine - authenticating for mounting bucket
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • Youtube upload API and cordova / phonegap
  • XGBOOST - DMATRIX
  • Sencha Touch 2.1 native (android) app not getting json from remote (it works on PC)
  • SCons libraries and sub-libraries
  • removing the default blue color on focus
  • How do I obtain a list of files that changed from svn over a date range?
  • What do I do with this error when I run tests in rails?
  • integrate POCO library in android ndk
  • Cannot page through all results using nextPageToken on YouTube search API v3
  • Creating a Multi-Step Modal Using Jquery
  • Enumerating Controls on a Form
  • Get the number 18437736874454810627
  • order post according to custom array position
  • AndEngine Applying Transparancy to AndEngine View
  • Adjust width of select element according to selected option's width
  • Mysterious problem with floating point in LISP - time axis generation
  • Google Custom Search with transparent background
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • CSS Linear-gradient formatting issue accross different browsers
  • Android screen density dpi vs ppi
  • What is the “return” in scheme?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Change an a tag attribute in JavaScript based on screen width
  • jQuery tmpl and DataLink beta
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal