JS實現圖片彈窗效果

時間 2021-02-13

標籤 javascript css html java jquery git web chrome 微信 session 欄目 JavaScript 简体版

原文原文鏈接

近期正在鼓搗我的網站，想實現進入網站自動彈出二維碼的效果，相似下面這樣：

中間磨磨唧唧從原生JS找到JS插件，浪費了很多精力和時間，可是也磕磕碰碰學到了些知識，建議讀者：想學一下彈窗的JS實現代碼的能夠看看前兩小節，只想實現效果的，直接複製源碼就行！javascript

一點擊鼠標實現彈出/隱藏圖片

實現原理：一個div作容器，裏面包含了二維碼圖片，把標題（鼠標點擊的目標）作一個onclick監聽，用div的display屬性控制圖片的顯示和隱藏。css

源碼：html

<script type="text/javascript">
function showdiv(){ 
  if(document.getElementById("img_div").style.display=="block"){ 
    document.getElementById("img_div").style.display="none"; 
  }
  else{
    document.getElementById("img_div").style.display="block"; 
  } 
}
</script>
<div class="resume_msg baseBorder resume_notice resume_lang_name" notice-key="msg" for-key="name" for-value="html" contenteditable="true" onclick="showdiv()">微信公衆號：浩Coding</div>
<div id="img_div" style="display:none;"><img src="images/qrcode_258.jpg"  width="258" height="258"/></div>

二進入網頁自動圖片彈窗/可關閉彈窗

實現原理：當點擊標題連接onclick監聽或者刷新網頁時候，獲取隱藏的二維碼圖片對象並彈出，點擊關閉或者二維碼圖片外的區域則隱藏二維碼圖片display = "none"。相似上面例子原理。
源碼（就幾行JS是核心代碼，多數是CSS樣式）：java

<style>

小提議：每次刷新頁面都會彈出圖片，不免引發客戶反感，能夠**在頁面存入****Session****用來判斷是否第一次加載頁**面，設置只有第一次加載頁面纔會彈窗。  

源碼：

<style>
      /* 觸發彈窗圖片的樣式 */
      #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
      }

      #myImg:hover {
        opacity: 0.7;
      }

      /* 彈窗背景 */
      .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* 設置顯示的優先層級級別 */
        z-index: 1234;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9);
        /* Black w/ opacity */
      }

      /* 設置彈出圖片的樣式 */
      .modal-content {
        margin: auto;
        display: block;
        width: 40%;
        max-width: 430px;
      }

      /* 設置文本內容的樣式 */
      #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
      }

      /* 設置彈出圖片的動畫，添加動畫 */
      .modal-content,
      #caption {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
      }

      @-webkit-keyframes zoom {
        from {
          -webkit-transform: scale(0)
        }

        to {
          -webkit-transform: scale(1)
        }
      }

      @keyframes zoom {
        from {
          transform: scale(0)
        }

        to {
          transform: scale(1)
        }
      }

      /* 設置span標籤的關閉按鈕樣式 */
      .close {
        position: absolute;
        top: 55px;
        right: 415px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
      }

      .close:hover,
      .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
      }

      /* 小屏幕中圖片寬度爲 100% */
      @media only screen and (max-width: 700px) {
        .modal-content {
          width: 100%;
        }
      }
    </style>
<!-- 圖片縮略圖，點擊圖片觸發點擊事件，以觸發彈窗 -->
    <img id="myImg" src="images/qrcode_258.jpg" alt="微信掃碼關注公衆號：浩Coding" width="300" height="200"
        style="display:none;">

    <!-- 彈窗 -->
    <div id="myModal" class="modal">

        <!-- 關閉按鈕 -->
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

        <!-- 彈窗內容 -->
        <!-- 屬性設置爲模態框 -->
        <img class="modal-content" id="img01">

        <!-- 文本描述 -->
        <div id="caption">微信公衆號二維碼</div>
    </div>
    <a href="" onclick="document.getElementById('myImg').onclick();">點擊查看微信公衆號二維碼</a>

$(function () { //頁面加載完完成後，自動觸發點擊事件創造彈窗
        SetImage();
        document.getElementById("myImg").onclick(); //觸發一次點擊事件
    });
    
<script type="text/javascript">
    function SetImage() {
        // 獲取DIV彈窗
        var modal = document.getElementById('myModal');

        // 獲取圖片插入到彈窗 - 使用 "alt" 屬性做爲文本部分的內容
        var img = document.getElementById('myImg');
        var modalImg = document.getElementById("img01"); //獲取彈出圖片元素
        var captionText = document.getElementById("caption"); //得到文本描述
        img.onclick = function openImage() { //註冊原圖片點擊事件
            modal.style.display = "block"; //此元素將顯示爲塊級元素，此元素先後會帶有換行符。
            modalImg.src = this.src; //將原圖片URL賦給彈出圖片元素
            captionText.innerHTML = this.alt; //賦值文本內容給彈出框文本
        }

        // 獲取 <span> 元素，樣式設置爲關閉按鈕
        var span = document.getElementsByClassName("close")[0];

        // 當點擊 (x), 關閉彈窗
        span.onclick = function () {
            modal.style.display = "none"; //將模態框屬性設置爲不可見
        }
    
    // 當點擊 圖片, 關閉彈窗，實現點擊空白處關閉圖片
        modal.onclick = function () {
            modal.style.display = "none"; //將模態框屬性設置爲不可見
        }
    }
    
  function openImage(){
        document.getElementById('myImg').onclick();
    }
</script>

小提議：每次刷新頁面都會彈出圖片，不免引發客戶反感，能夠在頁面存入Session用來判斷是否第一次加載頁面，設置只有第一次加載頁面纔會彈窗。
源碼：jquery

$(function () { //頁面加載完完成後，自動觸發點擊事件創造彈窗
    //必須先新建彈窗對象，否則沒法實現點擊連接觸發彈窗事件
    SetImage();
    //獲取彈窗session，決定是否彈窗
    var data = sessionStorage.getItem('imgSession');
    if(data == null){
      document.getElementById("myImg").onclick(); //觸發一次點擊事件
    }      
    //存session，防止一個頁面重複彈窗
    sessionStorage.setItem('imgSession', '2333333');
});

三彈出層插件jquery.popup.js

利用jquery.popup.js能夠實現圖中炫酷的動畫效果, 支持animate.css。
源碼：git

<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支持animate.css動畫的jquery彈出層插件</title>
  <link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
  <link href="css/animate.css" rel="stylesheet"/>
  <style>
    .htmleaf-content{
      width: 300px;
      margin:  20px auto;
    }
    .item {
        max-width: 65%;
        padding: 1em;
        background: #eee;
        display: none;
        position: relative;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        color: #000;
      }

      .item-close {
        cursor: pointer;
        right: 5px;
        top: 5px;
        position: absolute;
        background: #222;
        color: #fff;
        border-radius: 100%;
        font-size: 14px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        width: 24px;
      }
</style>
</head>
<body>
    <div class="htmleaf-content htmleaf-demo">
      <a href="#" class="btn1">微信掃碼關注公衆號：浩Coding</a>
    </div>
    <div id="item" class="item">
      <h3>浩Coding</h3>
      <p>支持animate.css動畫的jquery彈出層插件</p>
      <img src="img/qrcode_430.jpg">
      <b class="item-close js-popup-close">x</b>
    </div>

  <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="js/jquery.popup.js"></script>
  <script>
    $(function () {
          $('.btn1').on('click', function () {
            $('#item').popup({
              time: 1000,
              classAnimateShow: 'flipInX',
              classAnimateHide: 'hinge',
              onPopupClose: function e() {
                // console.log('0')
              },
              onPopupInit: function e() {
                // console.log('1')
              }
            });
          }); 
        });
</script>
</body>
</html>

本小節源碼下載地址：
https://gitee.com/jahero/tool...web