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=" width: 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>