2017-10-06 66 views
0

我有一個模式,我通過變量提供其內容信息。在頁面加載時使用不同的內容觸發相同的模式

<div id="myModal"> 
<div id="outer"> 
    <div id="inner"> 
    <div id="top">Headline</div> 
    <span><img class="btnClose bCancel" src="#"></span> 
    <div class="modalCnt"></div> 
    <div class="btn"> 
    <span class="btnText">OK</span> 
    </div> 
    </div> <!-- Inner --> 
</div> <!-- Outer --> 
</div> <!-- Close myModal --> 

我的問題是我對所有需要彈出的不同消息使用相同的模式。在頁面加載時,我必須彈出消息,但只有一個出現,這是所調用的最後一個模式。有沒有辦法讓呼叫排隊,以便顯示第一個模態,然後是第二個模態?

$(document).ready(function() { 
    modalHead.html("<h3>Headline 1</h3>"); 
    modalContent.html("<p>Content 1</p>"); 
    modal.show(); 

    modalHead.html("<h3>Headline 2</h3>"); 
    modalContent.html("<p>Content 2</p>"); 
    modal.show(); 
}); 
+0

它的發生是由於所有模塊的相同ID – Satish

回答

0

嘗試:

function new_modal(head, content){ 

    var random = Math.floor(1000 + Math.random() * 9000); 

    var modal_html = '<div id="myModal_'+ random +'">' + 
    '<div id="outer">' + 
     '<div id="inner">' + 
     '<div id="top">'+head+'</div>' + 
     '<span><img class="btnClose bCancel" src="#"></span>' + 
     '<div class="modalCnt">'+content+'</div>' + 
     '<div class="btn">' + 
     '<span class="btnText">OK</span>' + 
     '</div>' + 
     '</div> <!-- Inner -->' + 
    '</div> <!-- Outer -->' + 
    '</div>'; 

    $('body').append(modal_html); 

    return 'myModal_' + random; 

} 

$(document).ready(function() { 
    modal1 = new_modal("<h3>Headline 1</h3>", "<p>Content 1</p>"); 
    $('#' + modal1).show(); 
    modal2 = new_modal("<h3>Headline 2</h3>", "<p>Content 2</p>"); 
    $('#' + modal2).show(); 
}); 

希望它有助於

+0

這很好。 – user3403590

0

你正在做的是一次調用2個不同模態數據的相同函數。所以如果我們按照函數的流程走,它會在最後一行完成執行。所以,這就是爲什麼它顯示的是上模,所以你可以做的是使用if - else條件,

if modal1 { 
modalHead.html("<h3>Headline 1</h3>"); 
modalContent.html("<p>Content 1</p>"); 
modal.show(); 
} 
else if modal 2 { 
modalHead.html("<h3>Headline 2</h3>"); 
modalContent.html("<p>Content 2</p>"); 
modal.show(); 
} 
else { 
//default part 
} 
-1

請重溫下面的官方文檔:

https://v4-alpha.getbootstrap.com/components/modal/#varying-modal-content

很清楚和e legant解決方案。

<script> 
$('#myModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) 
    var header = button.data('header') 
    var content = button.data('content') 
    var modal = $(this) 
    modal.find('.modal-title').text(header) 
    modal.find('.modal-modalCnt').val(content) 
}) 
</script> 

當你觸發模態時,傳遞data-header =「your_header」data-content =「your_content」。

再加一個類標題到你的標題。希望我清楚。

+1

雖然這在理論上可以回答這個問題,但[這將是更可取的](// meta.stackoverflow.com/q/8259)在此包含答案的基本部分,並提供供參考的鏈接。 –

+0

儘管此鏈接可能回答問題,但最好在此處包含答案的基本部分,並提供供參考的鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效。 - [來自評論](/ review/low-quality-posts/18870304) –

相關問題