jquery点击弹出一个页面+点击X可关闭的部分

纯原创，本人第一份工作的工作页面总结

<!--－－－－样式我就不写了，样式比较简单－－－－－－-->
左边图片右边的人物介绍，基本上的方法都是。左边的img左浮动。此时右边的文字自然就会和图片平齐，如果想让右侧文字向下移点，可以先让文字（如果是行内元素，要使其display：block；）

头部。可点击x关闭的部分：使用的jQuery：

<!-----------可关闭的提示----------------->
<div class="weixiu_keguan color1">
    <i class="icon lf size21 weixiu_ling">&#xe6eb;</i>
    <span class="size12 font-sans-light weixu_yjword lf" style="   83%;">忆家网平台不会要求您点击任何网址链接进行退款操作。点击查看
        <a href="#"class="color1">"谨防诈骗公告声明"</a>
    </span>
    <!--关闭按钮-->
    <i id="weixiu_closeFix"class="icon  color1">&#xe6c0;</i>
</div>
<script>

$("#weixiu_closeFix").click(function () {
    $('.weixiu_keguan').hide();
    $('.weixiu_dingdan').attr('style', 'margin-top:60px');
})

</script>

<!--------------可滑动的图片-->
<div class="swiper-container">
    <ul class="swiper-wrapper weixiu_shifu lf g_tab">
        <li class="swiper-slide" ><img  src="img/yuyue/wei1.png"big="img/yuyue/wei1.png" alt=""/></li>
        <li class="swiper-slide" ><img src="img/yuyue/wei2.png" alt=""/></li>
        <li class="swiper-slide" ><img src="img/yuyue/wei3.png" alt=""/></li>
        <li class="swiper-slide" ><img src="img/yuyue/wei1.png" alt=""/></li>
        <li class="swiper-slide"><img src="img/yuyue/shifu1.png" alt=""/></li>
    </ul>
    <div class="swiper-button-next icon size28 color1">&#xe6fe;</div>
</div>

<span class="size12 font-sans-light">完工后。师傅帮我带走了所有的垃圾，真实太贴心了。</span>
<script>

/******轮播广告swiper插件******/
        var mySwiper = new Swiper('.swiper-container', {

            slidesPerView: 3,//'auto',//
            zoom:true,
            zoomMin:2,
            slidesPerGroup: 3,
            nextButton: '.swiper-button-next'

//slidesPerView : 3.7,//图片比例

</script>

这部分用的是一个swiper插件，还蛮好用的，我观察到几个网站都是用的这个插件
要引入该插件的<script src="js/jquery.swiper.min.js"></script>
还有样式表，这我就不写了，和我们公司样式表写在了一起。
还有一个，左边是图片，右边是人物介绍的时候
/***************************第二张图片********/
第二张图片点击确认并付款后弹出第三张图片
具体做法：

<div class="font-sans-light sbxiu">
    <button class="bg2 color1 size12 click_pop"><a href="#">确认并付款</a></button>//点击的红色按钮
    <a href="#" class="font-sans-medium color2 size13 app">下载APP，领取现金红包</a>
</div>

   <!--－－－－－－－－－－－－－－－隐藏的师傅上门－－－－－－－－－－－－－－－－－－－-->
<div class="bgPop close_follow"></div><!--遮罩-->
<div  class="order_follow pop" style="background-color: #ffffff">
    <div class="follow_head">
        <span class="font-sans-light size21 color17 ">订单跟踪</span>
        <span class="icon close_follow close"style="position: absolute;right: 0;">&#xe6c0;</span>
    </div>
    <div class="follow_num font-sans-light size14">
        <span>订单号：8602828843</span>
        <span class="rt size12 color13 font-sans-demilight">2016-10-05 10:00</span>
    </div>

  <!--－－－－－－－－－－－－点击遮罩也可关闭弹出的这个页面－－－－－－－－－－-->

<script>

/*******弹出层的关闭*/
$(".close_follow").click(function () {
    $('.order_follow').hide();
    $('.bgPop').hide();
    $('.bgPop2').hide();
});
/**********点击弹出页面*/
$('.click_pop').click(function () {
    $('.bgPop,.pop').show();
});
</script>