bootstrap用什么来制作背景被动

我正在尝试使用CSS和jQuery创建一个类似Bootstrap的模态，没有Bootstrap。 但在启动模态后，背景仍然有效。 我可以做些什么来让它变得被动，以便在滚动时，只有模态内容滚动，如果在模态窗口外点击，它会被关闭？ 请分享您的建议。 下面是我的代码片段。

$(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"); }); }); 

 * { 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; } 

             
 
 Click here to launch a sample modal made without using Bootstrap. 
 
  Launch Sample Modal  
 
 
 
 
 
Modal Title
  
 
 
 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. 
 
 
 Close Save changes 
 
 
     

Answer 1

它通常使覆盖层覆盖屏幕：

 $(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(); }); } }); 

 * { 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; } 

             
 
 Click here to launch a sample modal made without using Bootstrap. 
 
  Launch Sample Modal  
 
 
 
 
 
Modal Title
  
 
 
 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. 
 
 
 Close Save changes