How can I make my modal box faded behind pop-up box?

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

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>

Answer 2

Add the following style to the css file for the popup.

z-index: 2;