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


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




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

最佳答案

这是你想要的吗 ?



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

关于javascript - 如何使整个背景可点击?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57497361/

10-09 18:24
查看更多