簡單的jquery模態插件，如何處理html內容

基本上，我正在構建一個基本的jQuery模態插件作爲練習，並且儘可能多地在野外幫助參考，我不確定將html推入正在我的jQuery中構建的模式的最佳方法。簡單的jquery模態插件，如何處理html內容

此代碼是建立我的彈出窗口：

 var container = $('<div class="container"></div>'); 
     var header = $('<div class="modal"><div class="modal-header"></div></div>'); 
     var content = $('<div class="modal-body"></div>'); 
     var footer = $('<div class="modal-footer"><a class="secondary" href="#">Cancel</a><span id = "button-secondary-label">or</span><span class="green_btn"></span></div>'); 

     $(".popup").append(container); 
     $(".container").append(header); 
     $(".modal").append(content); 
     $(".modal").append(footer);

在正在調用與上面的代碼的JavaScript文件的HTML文件，我想通過HTML模態體。我知道我可以只寫：

$(".modal-body").html("html goes here")

，但我想使這個插件處理儘可能多的，所以這將是做以下的最佳方式：

例如。 HTML：

... 
<script type="text/javascript"> 
$(.popup).modal(); 
</script> 
</head> 
<body> 
<div class="popup"><div class="body-text">I want this text in the .modal-body</div></div>

在js文件：

我想爲t使用.body-text中的html並將其移入.modal-body類，或者可以得到類似結果的東西。

同樣，試圖在外部js文件來做到這一點，而不是在example.html的

來源

2012-04-16 mstef

是很普遍使用的ID（因爲它可以被設置爲href和可用於指向給定內容鏈接），而不是嘗試從模態框中定位DOm元素。所以，你可以做

一些內容是在模態

然後就抓住它，並把它添加到cmodal

$('#boo').appendTo(content);

你也可以有一個選項，以便它可以克隆，離開了原來的複製後面

$('#boo').clone().appendTo(content);

你可以在技術上處理類，但之後取決於你的插件如何構建。因爲您可以抓取所有內容並生成單個模態內容或創建多個內容以在使用它們之間進行瀏覽。

$('.popup').each(function() { 
    $(this).appendTo(content); 
}); 



var items = $('.popup'), 
len = items.length, 
cur = 0; 

$next.click(function() { 
    cur++; 
    if (cur === len) cur = 0; 
    items.eq(cur).show(); 
});

來源

2012-04-16 06:30:45 GillesC

簡單的jquery模態插件，如何處理html內容

回答

相關問題