如何使整個背景可點擊？

Question

我希望能夠將整個背景顏色設置為紅色，以使其以模態框命名為“ sectors”。 我還希望能夠減小背景尺寸，以使其不覆蓋整個屏幕。

• 用戶應該能夠單擊扇區或紅色背景，並且應該打開我的模式框。
• 紅色背景不應覆蓋整個屏幕。

 // maintains a sticky pop up $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: 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; } 

 <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="sectors"> <div style="padding-top:20px" > <div style="border-style:none; border-color:none; background-color:#FF0000"> <!-- red --> <div class="heading " style="text-transform:uppercase; font-size:14px"> <a class="btn" href="#ex5" style="color:blue">Sectors <span class="down-arrow"; style="color:blue"> <i class="fa fa-caret-down"></i> </span></a> </div> </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-tv-temp"> <b> TV </b> </label> </p> <p> <input type="checkbox" id="group3"> <label for="group3" class="onlyThese sector-radio-temp"> <b> Radio </b> </label> </p> <p> <input type="checkbox" id="group4"> <label for="group4" class="onlyThese sector-OOH-temp"> <b> OOH </b> </label> </p> </div> <div class="your-div"> <p style="font-size:16px; text-transform:uppercase; float:right"> <a href="#" rel="modal:close" class="onlyThese" style="color:white"> <b>Apply</b></a> </p> </div> </div> 

Answer 1

移動錨標簽以環繞div（包含紅色背景）

您要： <a><div><span></span></div></a>

而不是： <div><a><span></span></a></div>

Answer 2

這是你想要的嗎 ？

 // maintains a sticky pop up $('a[href="#ex5"]').click(function(event) { event.preventDefault(); $(this).modal({ escapeClose: false, clickClose: false, showClose: 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; } 

 <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="sectors"> <div style="padding-top:20px" > <div style="border-style:none; border-color:none; background-color:#FF0000;display:inline;"> <a class="btn" href="#ex5" style="color:blue">Sectors <span class="down-arrow"; style="color:blue"> <!-- red --> <div class="heading " style="text-transform:uppercase; font-size:14px;"> <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-tv-temp"> <b> TV </b> </label> </p> <p> <input type="checkbox" id="group3"> <label for="group3" class="onlyThese sector-radio-temp"> <b> Radio </b> </label> </p> <p> <input type="checkbox" id="group4"> <label for="group4" class="onlyThese sector-OOH-temp"> <b> OOH </b> </label> </p> </div> <div class="your-div"> <p style="font-size:16px; text-transform:uppercase; float:right"> <a href="#" rel="modal:close" class="onlyThese" style="color:white"> <b>Apply</b></a> </p> </div> </div>