时间戳

首页 > 解决方案 > 如何使整个背景可点击？

javascript - 如何使整个背景可点击？

问题描述

我希望能够使整个背景为红色，就像我的模态框命名为部门一样。我还希望能够减小背景的大小，这样它就不会覆盖整个屏幕。

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

标签： javascriptjqueryhtmlcss

解决方案

移动您的锚标记以环绕 div（包含红色背景）

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

代替：<div><a><span></span></a></div>

推荐阅读