如何让我的模态框在弹出框后面褪色？

Question

I have been tasked with creating a modal box and implementing it into some existing code.

My modal box is called sectors and for some reason when it is clicked on and the pop up box shows, it sticks onto the screen; instead of being behind the black-ish faded background.

I want to know why this happens and how I can make it so it does not stand out the way it does.

The snippet of code provided is what I have integrated my modal box code into.

 var content = ""; $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: false, }); $('input[type=checkbox]').prop('checked', false); });

 .onlyThese{ cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]+label { color:white } input[type="checkbox"] { display: none } input[type="checkbox"]:checked+label { color:red } input:focus{ outline: none; } /*keep filter at bottom-right*/ .your-div { float:right; bottom:0; right:0; position:absolute; padding-right:30px; padding-bottom:15px; font-size:16px } .blackBox { border-style:solid; border-color:black; background-color:black; margin-bottom:3px; padding-top:12px; padding-bottom:12px; padding-left:7px; font-family:nunito; font-size:14px; } a { color:white; text-decoration:none; font-family:nunito } .content.media-planning-page .bottom-section .sidebar .single-filter .sub-filters.show{ display: block; } .content.media-planning-page .bottom-section .ads-section .sectors{ margin-bottom: 20px; position: absolute; top: 0px; right: 0px; width: 150px; z-index: 9; } .content.media-planning-page .bottom-section .ads-section .sectors .heading{ font-size: 18px; font-weight: bold; margin-left: 10px; padding-right: 5px; cursor: pointer; padding:10px; } .content.media-planning-page .bottom-section .ads-section .sectors .heading .down-arrow{ float: right; } /*.content.media-planning-page .bottom-section .ads-section .sectors .heading, .content.media-planning-page .bottom-section .ads-section .sectors .options, .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option,*/ .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option .field, .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option .label{ display: inline-block; } .content.media-planning-page .bottom-section .ads-section .sectors .options{ box-shadow: 0 4px 10px -2px grey; margin-top: 5px; display: none; } .content.media-planning-page .bottom-section .ads-section .sectors .options.show{ display: block; } .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option{ padding: 8px; border-bottom: 1px solid #f7f7f7; background: white;

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <!-- Remember to include jQuery :) --> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <div class="content media-planning-page"> <div class="container"> <div class="top-image"> <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg" width="10%"> </div> <div class="bottom-section"> <div id="special"> <div class="heading-alter"; align="left"; style="text-transform: uppercase; font-family:nunito;"> <b> Filter </b> </div> </div> <div class="ads-section"> <div class="sectors"> <div style="padding-top:20px";> <div style="border-style:none; border-color:none; background-color:#FF0000"> <!-- red --> <a class="btn" href="#ex5"><div class="heading "; style="color:white; text-transform:uppercase; font-size:14px"> Sectors <span class="down-arrow"; style="color:white"> <i class="fa fa-caret-down"></i> </span></div></a> </div> </div> </div> <div id="ex5"; class="modal"; style="background-color:black;"> <div class="options"; style="line-height:1.8; float:left;"> <p> <input type="checkbox" id="group1"> <label for="group1" class="onlyThese sector-print-temp"> <b> Publication </b> </label> </p> <p> <input type="checkbox" id="group2"> <label for="group2" class="onlyThese sector-print-temp"> <b> TV </b> </label> </p> <p> <input type="checkbox" id="group3"> <label for="group3" class="onlyThese sector-print-temp"> <b> Radio </b> </label> </p> <p> <input type="checkbox" id="group4"> <label for="group4" class="onlyThese sector-print-temp"> <b> OOH </b> </label> </p> </div> <div class="your-div"> <p style="color:white; font-size:16px; text-transform:uppercase"> <a href="#" rel="modal:close"; class="onlyThese"> <b>Apply</b></a> </p> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div>

Answer 1

将以下样式添加到弹出窗口的 css 文件中。

z-index: 2; 

Answer 2

its because of z-index issues, z-index of overlay should be greater then sectors.

so overtire z-index of .blocker 10 instead of 1. because sectors having z-index 9.

.blocker{ z-index:10 !important;} need to mark important because it comes from thirdparty.

 var content = ""; $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: false, }); $('input[type=checkbox]').prop('checked', false); });

 .blocker{ z-index:10 !important;} .onlyThese{ cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="checkbox"]+label { color:white } input[type="checkbox"] { display: none } input[type="checkbox"]:checked+label { color:red } input:focus{ outline: none; } /*keep filter at bottom-right*/ .your-div { float:right; bottom:0; right:0; position:absolute; padding-right:30px; padding-bottom:15px; font-size:16px } .blackBox { border-style:solid; border-color:black; background-color:black; margin-bottom:3px; padding-top:12px; padding-bottom:12px; padding-left:7px; font-family:nunito; font-size:14px; } a { color:white; text-decoration:none; font-family:nunito } .content.media-planning-page .bottom-section .sidebar .single-filter .sub-filters.show{ display: block; } .content.media-planning-page .bottom-section .ads-section .sectors{ margin-bottom: 20px; position: absolute; top: 0px; right: 0px; width: 150px; z-index: 9; } .content.media-planning-page .bottom-section .ads-section .sectors .heading{ font-size: 18px; font-weight: bold; margin-left: 10px; padding-right: 5px; cursor: pointer; padding:10px; } .content.media-planning-page .bottom-section .ads-section .sectors .heading .down-arrow{ float: right; } /*.content.media-planning-page .bottom-section .ads-section .sectors .heading, .content.media-planning-page .bottom-section .ads-section .sectors .options, .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option,*/ .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option .field, .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option .label{ display: inline-block; } .content.media-planning-page .bottom-section .ads-section .sectors .options{ box-shadow: 0 4px 10px -2px grey; margin-top: 5px; display: none; } .content.media-planning-page .bottom-section .ads-section .sectors .options.show{ display: block; } .content.media-planning-page .bottom-section .ads-section .sectors .options .single-option{ padding: 8px; border-bottom: 1px solid #f7f7f7; background: white;

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <!-- Remember to include jQuery :) --> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <div class="content media-planning-page"> <div class="container"> <div class="top-image"> <img src="https://tse4.mm.bing.net/th?id=OIP.qKsWIt_Qae6vtWd3-RulIQHaHa&pid=Api&P=0&w=300&h=300.jpg" width="10%"> </div> <div class="bottom-section"> <div id="special"> <div class="heading-alter"; align="left"; style="text-transform: uppercase; font-family:nunito;"> <b> Filter </b> </div> </div> <div class="ads-section"> <div class="sectors"> <div style="padding-top:20px";> <div style="border-style:none; border-color:none; background-color:#FF0000"> <!-- red --> <a class="btn" href="#ex5"><div class="heading "; style="color:white; text-transform:uppercase; font-size:14px"> Sectors <span class="down-arrow"; style="color:white"> <i class="fa fa-caret-down"></i> </span></div></a> </div> </div> </div> <div id="ex5"; class="modal"; style="background-color:black;"> <div class="options"; style="line-height:1.8; float:left;"> <p> <input type="checkbox" id="group1"> <label for="group1" class="onlyThese sector-print-temp"> <b> Publication </b> </label> </p> <p> <input type="checkbox" id="group2"> <label for="group2" class="onlyThese sector-print-temp"> <b> TV </b> </label> </p> <p> <input type="checkbox" id="group3"> <label for="group3" class="onlyThese sector-print-temp"> <b> Radio </b> </label> </p> <p> <input type="checkbox" id="group4"> <label for="group4" class="onlyThese sector-print-temp"> <b> OOH </b> </label> </p> </div> <div class="your-div"> <p style="color:white; font-size:16px; text-transform:uppercase"> <a href="#" rel="modal:close"; class="onlyThese"> <b>Apply</b></a> </p> </div> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div>