Question

我希望能够使整个背景变成红色，以便以模态框命名为扇区的方式单击。我还希望能够减小背景尺寸，以使其不覆盖整个屏幕。

用户应该能够单击扇区或红色背景它应该打开我的模式框。
红色背景不应覆盖整个屏幕。

// 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>

如何使整个背景可点击？

2 个答案: