在javascript中顯示自定義彈出框

-3

我想在按下圖片時複製Wordpress彈出框。我有一個可鏈接的<img src="..." />這樣的：在javascript中顯示自定義彈出框

如果我按例如。第一個，它會變成全屏，右上角的「X」可以像這樣關閉彈出窗口：

我該怎麼做？另外，我想在圖像全屏時添加一些說明文字。

來源

2016-11-16 Luca Alberto

使用百萬個燈箱插件之一。 –

我正在做我的個人頁面，而不是在WordPress的網站！ –

你想這是完全手動？或者你會接受使用jQuery和一些標準庫？ –

OK讓我們看看這個代碼，一個非常簡單的例子，你完全可以在日後自定義...可以試試，如果這對你的工作，你是歡迎後來問的事情......

<html> 

<head> 
    <style> 
     .popup { 
      position: fixed; 
      width: 80vw; 
      height: 80vh; 
      left: 10vw; 
      top: 10vh; 
      display: none; 
      background-color: white; 
     } 

     .close { 
      float: right; 
     } 
    </style> 
</head> 

<body> 
    <img src="1.jpg" class="popup-image"> 
    <img src="2.jpg" class="popup-image"> 
    <img src="3.jpg" class="popup-image"> 
    <div class="popup" id="popup-container"> 
     <span class="close" onclick="hidepopup()">X</span> 
     <img id="popup-image" width="100%" height="100%"> 
    </div> 
</body> 
<script src="jquery.js"></script> 
<script> 
     function showpopup(source){ 
      $("#popup-image").attr("src",source); 
      $("#popup-container").show(); 
     } 
     function hidepopup(){ 
      $("#popup-container").hide(); 
     } 
     $(document).ready(function(){ 
      $(".popup-image").click(function(){ 
       showpopup($(this).attr("src")); 
      }); 
     }); 
    </script> 

</html>

的伎倆在這裏，我們有容器

<div class="popup" id="popup-container"> 
     <span class="close" onclick="hidepopup()">X</span> 
     <img id="popup-image" width="100%" height="100%"> 
    </div>

和腳本，將顯示和隱藏彈出

function showpopup(source){ 
    $("#popup-image").attr("src",source); 
    $("#popup-container").show(); 
} 
function hidepopup(){ 
    $("#popup-container").hide(); 
}

還有一個jQuery的綁定，它會在點擊圖像時調用顯示，並且不要忘記將源預覽消耗掉

 $(document).ready(function(){ 
      $(".popup-image").click(function(){ 
       showpopup($(this).attr("src")); 
      }); 
     });

來源

2016-11-16 10:32:03

在javascript中顯示自定義彈出框

回答

相關問題