如何在jquery中为firebase实现一个图像弹出窗口

我有点麻烦，因为我不知道如何在jquery中为firebase实现图像弹出窗口。 我在互联网上搜索过它，但没有找到如何为动态网站实现它的方法。 我有以下jquery代码，有人可以帮忙吗？ 关于这个，我还没有在stackoverflow上找到任何东西。

这是我的HTML代码

                 .contentImage{ position: relative; } .image { opacity: 1; display: block; width: 100%; height: 40%; transition: .5s ease; backface-visibility: hidden; } .image:hover { opacity: 0.3; } .gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } .gallery:hover { border: 1px solid #777; } .gallery img { width: 100%; height: auto; }   
 
 
  Toggle navigation     here is the title 
 
 
 
Home
 
Your images
 
Public images
 
 
 
 
 
 
   // Initialize Firebase var config = { apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE", authDomain: "farmyantra.firebaseapp.com", databaseURL: "https://farmyantra.firebaseio.com", storageBucket: "farmyantra.appspot.com", messagingSenderId: "146534813177" }; firebase.initializeApp(config);      window.jQuery || document.write('')      

这是我的js文件

 $(document).ready(function(){ firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in. var token = firebase.auth().currentUser.uid; queryDatabase(token); } else { // No user is signed in. window.location = "https://stackoverflow.com/questions/43537135/how-to-implement-an-image-popup-in-jquery-for-firebase/index.html"; } }); }); function queryDatabase(token) { firebase.database().ref('/Posts/').once('value').then(function(snapshot) { var PostObject = snapshot.val(); var keys = Object.keys(PostObject); var currentRow; for (var i = 0; i< keys.length; i++) { var currentObject = PostObject[keys[i]]; if (i % 4 == 0) { currentRow = document.createElement("div"); $(currentRow).addClass("row"); $("#contentHolder").append(currentRow); } var col = document.createElement("div"); $(col).addClass("col-lg-3"); var image = document.createElement("img"); image.src = currentObject.url; $(image).addClass("contentImage image hover "); var p = document.createElement("p"); $(p).html(currentObject.caption); $(p).addClass("contentCaption"); $(col).append(image); $(col).append(p); $(currentRow).append(col); //create new row on every third entry //col-lg-4 } // ... }); } 

Answer 1

那么，你的问题不明确。 但是，让我按照我的理解尝试回答。 如果要在弹出窗口中显示图像，请将引导模式添加到html，并在单击要从firebase数据库显示的每个图像时，显示引导模式，如下所述：

将此模态div添加到您的HTML：

 
 
 
 
 × 
Caption goes here..
 
 
 
 
 
 
  

现在在timeline.js文件中，添加以下代码：

 $('img').on('click', function () { $('#imageModal #image').empty(); var imgUrl = $(this).attr('src'); var caption = $(this).siblings('.contentCaption').html(); $('#imageModal #image').append(''); $('#imageModal .modal-title').text(caption); $('#imageModal').modal('show'); }); 

注意：queryDatabase函数中存在一个小错误：

 var image = document.createElement("img"); image = document.createElement("div") image.src = currentObject.url; 

您正在创建一个图像元素并将相同的变量分配给div元素。 因此，图像元素被div元素覆盖。 删除第二个语句image = document.createElement("div")以显示图像元素。