jQuery.reveal.js是一個非常流行的jQuery插件,它可以幫助我們創建簡單、漂亮并且高度可定制的彈出層,在網頁中廣泛應用。在使用該插件的過程中,我們經常需要向彈出層中傳遞一些信息或者參數,這里簡單介紹一下如何實現這個功能。
$(document).on("click", ".btn", function(){ var value = $(this).data("value"); $("#modal").reveal({ // options... }); $("#modal").find(".modal-content").html(value); });
在上面的代碼中,我們先監聽了一個按鈕的點擊事件,然后獲取了該按鈕的data-value屬性值,這里假設它為一個字符串。接下來,我們使用reveal()方法創建了一個彈出層,然后通過find()方法找到其中的模態框,并使用html()方法設置它的內容為上面獲取到的value值。這樣就可以將信息傳遞到彈出層中了。
$(document).on("click", ".btn", function(){ var id = $(this).data("id"); $.ajax({ url: "/api/get_data", data: {"id": id}, success: function(data){ $("#modal").reveal({ // options... }); $("#modal").find(".modal-content").html(data); } }); });
如果需要從服務器動態獲取信息再傳遞到彈出層中,我們可以使用AJAX來實現。在上面的代碼中,我們監聽了一個按鈕點擊事件,然后獲取了按鈕的data-id屬性值,這里假定它為一個數字。接著,我們使用jQuery的$.ajax()方法向服務器發送了一個POST請求,傳遞了id參數。在請求成功后,服務器返回了一些數據,然后我們使用reveal()方法創建了一個彈出層,并將傳回的數據填充到彈出層中。這樣就實現了從服務器動態獲取并傳遞數據到彈出層的功能。
下一篇html滾動彈窗代碼