使用JQ实现点击其他区域关闭窗口的功能

迈不过友情╰ 2021-09-20 06:52 196阅读 0赞

<div class="fc">
            <div class="fc_box">
              <div class="fc_c">
                <p class="fc_t ovf"><span>预约挂号</span><span>只显示可预约</span></p>
                <div class="fc_b">
                    <div><span >解放军总医院</span><span>皮肤科</span><img src="images/shou.png" alt=""></div>
                    <ul class="fc_b1">
                      <li>
                        <p>4月24号（周三）上午</p>
                        <p class="kyy">可预约</p>
                      </li>
                      <li>
                        <p>4月24号（周三）下午</p>
                        <p class="ym">约满</p>
                      </li>
                      <li>
                        <p>4月25号（周四）上午</p>
                        <p class="kyy">可预约</p>
                      </li>
                    </ul>
                    <div><span>泰安市中医医院 </span><span>皮肤科</span><img src="images/shou.png" alt=""></div>
                    <ul class="fc_b2">
                      <li>
                        <p>4月27号（周六）上午</p>
                        <p class="ym">约满</p>
                      </li>
                      <li>
                        <p>4月27号（周六）下午</p>
                        <p class="ym">约满</p>
                      </li>
                    </ul>
                </div>
              </div>
            </div>
          </div>
      <div class="foot">
        <div class="foot_b main ovf">
          <div><img src="images/gz.png" alt=""><p>关注</p></div>
          <div>
            <p class="yy">预约</p>
            <p class="zx"><a href="chat.html">咨询</a></p>
          </div>
        </div>
      </div>

.fc{  position: fixed; width: 100%; height: 100%; top: 0; bottom:0; left: 0; right:0; background: rgba(17, 17, 17, 0.35); z-index: 1000; display: none; max-width: 640px; }
    .fc_box {  width: 100%; height: 62%; z-index: 100; max-width: 640px; position: fixed; padding: 0.6rem 0.5rem 0 0.6rem; bottom: 0; animation: myfirst 0.5s; background: #ffffff; -webkit-animation: myfirst 0.5s; }
    @keyframes myfirst {  from {  height: 0; } to {  height: 62%; } }
    .h {  transition: height 1s linear; animation: mytwo 1s !important; -webkit-animation: mytwo 1s !important; -webkit-transition: height 1s linear; -moz-transition: height 1s linear; -ms-transition: height 1s linear; -o-transition: height 1s linear; }
    @keyframes mytwo {  from {  height: 62%; } to {  height: 0; } }
    .fc_t span:nth-child(1){  color: #101010; font-size: 0.7rem; }
    .fc_t span:nth-child(2){  float: right; color: #666666; margin-top:0.1rem; padding-left:0.8rem; background: url('../images//w1.png')no-repeat left center; background-size:14%; }
    .fc_b div{  margin: 0.9rem 0; }
    .fc_b div span:nth-child(1){  background: url('../images/dian.png')no-repeat left center; background-size:6%; padding-left:0.7rem; margin-right:0.3rem; }
    .fc_b div img{  float: right; width: 4%; margin-top:0.3rem; }
    .fc_b1 {  border-bottom:1px solid #eaeaea; }
    .fc_b li{  overflow: hidden; margin:1rem 0; }
    .fc_b li p:nth-child(1){  float: left; margin-top:0.2rem; }
    .fc_b li p:nth-child(2){  float: right; width: 17%; font-size: 0.55rem; }
    .kyy{  border-radius:24px; background: #2e7ced; color: #fff; text-align: center; padding: 0.18rem 0; }
    .ym{  border-radius:24px; background: #cacaca; color: #fff; text-align: center; padding: 0.15rem 0; }
    .foot{  position: fixed; bottom: 0;  max-width: 640px; padding:0.2rem 0; z-index: 100; background: #fff; width: 100%; }
    .foot_b div:nth-child(1) {  float: left; width: 30%; text-align: center; }
    .foot_b div:nth-child(1) img {  width: 23%; margin: auto; }
    .foot_b div:nth-child(1) p{  font-size: 0.5rem; margin-top:0.2rem; }
    .foot_b div:nth-child(2) {  float: left; width: 70%; margin-top:0.1rem; }
    .foot_b div:nth-child(2) p{  float: left; width: 50%; text-align: center; padding: 0.4rem 0; color: #fff; }
    .foot_b div:nth-child(2) p:nth-child(1){  background-color: #6eb0fa; border-radius: 36px 0px 0px 36px; }
    .foot_b div:nth-child(2) p:nth-child(2){  background-color: #2e7ced; border-radius: 0px 36px 36px 0px; }
    .foot_b div:nth-child(2) p:nth-child(2) a{  color: #fff; }

$(".yy").click(function(){ 
      $(document).bind('mousewheel', function (event, delta) { 
      return false;
      });
      $(".fc").show();
      $(".fc_box").removeClass("h");
    })
     document.addEventListener("click", function(e){ 
     var target = event.target;
     if (target.className=="fc"){ 
      $(document).unbind('mousewheel');
      $(".fc").hide();
      $(".fc_box").addClass("h");
     }
     })