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

      <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");
 }
 })

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路