爲很多帖子打開一個模式

我有一個帖子列表和每個帖子我可以打開一個模式。問題是我想要單個模態的代碼並使用動態模態。爲很多帖子打開一個模式

這裏是我的實際代碼：https://jsfiddle.net/wrucjszv/

在將來，我會取得與阿賈克斯的職位將是一個數組，我不想爲每個職位的模式。我想使用一個單一的模式，但從內部動態的內容。在我的情況下，我有按鈕與編號

#myBtn

與內容「模態中的某些文本..」。在第二個也許我會有「我不擅長JavaScript」，並且名單可以繼續。我想要從內部獲得內容的模態動態。我能做什麼？

編輯：

https://jsfiddle.net/wrucjszv/4/

在這裏你可以看到更多究竟爲什麼我要那個。將來我會有很多帖子，而且我不需要加載大量的模塊。我想要一個單獨的模型，並且我希望能夠編輯模態中的每篇文章，我需要具備這種動態。在佔位符中，我需要擁有帖子的標題和描述，並且我需要提交帶有帖子ID的編輯模式。

來源

2017-02-13 Fortaing75

請不要使用相同的ID爲多個元素。即使在一個例子中。你可以聽課，而不是共享 –

您真正需要做的就是在展示模態之前更新內容，其他部分可以保持不變。在這裏看到你的jsFiddle的叉子 - https://jsfiddle.net/hvpvfc67/

我所做的只是在模態內容元素中添加一個額外的div，以便我們可以訪問文本。

<!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <div class="modal-text"> 
     <p>Some text in the Modal..</p> 
    </div> 
    </div>

然後我到了新的div的引用：

var modalContent = document.querySelector('.modal-text');

最後更新DIV中的HTML在點擊處理程序：

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modalContent.innerHTML = "The text has changed!"; 
    modal.style.display = "block"; 
}

來源

2017-02-13 20:49:23 Chris

我已更新我的問題。 – Fortaing75

你保持一個單一的模式作爲框架。您每次打開一個，並使用javascript即時創建內容，方法是更換模態內容。

最重要的問題是：你從哪裏得到你的數據？如果你將它存儲在頁面中，這很簡單，根據點擊的內容，只需在模式中輸入正確的數據即可。

假設你在一個名爲modalContent變量放在你的語氣內容html，爲了把它放在裏面模式，你需要：

$('#myModal .modal-content').html(modalContent);

如果數據不在該頁面，你得到它來自一些第三方API的過程會更長一些：您使用click事件來調用API，並在success回調函數中填充變量，將其置於.modal-content之內並觸發模式打開。另外，如果你可能想要觸發模式的開放其實之前得到響應，但你需要採取一些預防措施：

打開它
使用加載動畫讓之前一直刪除現有模式的內容用戶知道他是即將看到的東西在模式
如果調用失敗關閉模式，並顯示一個通知用戶有關故障

來源

2017-02-13 20:54:58

他們不使用Bootstrap模式:) – Chris

你似乎是正確的。那麼，原則是一樣的。感謝您指出。 –

沒問題，並同意否則原則是一樣的。 – Chris

爲很多帖子打開一個模式

回答

相關問題