単純なjqueryモーダルプラグイン、htmlコンテンツの扱い方

基本的にjqueryの基本的なモーダルプラグインを実際に構築していますが、野生の多くの品種が参考になりました。私のjQueryで構築されているモーダルにhtmlをプッシュするための最良の方法です。単純なjqueryモーダルプラグイン、htmlコンテンツの扱い方

このコードは私のポップアップを構築している：上記のコードではJavaScriptファイルを呼び出している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);

、私は-体をモーダルHTMLを渡したいと思います。

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

が、私は、プラグインが可能な限り対処したいと思いますので、どのようなことは次のことを行うための最善の方法だろう：私はちょうど次のことを書くことができます知っている例では

。 HTML：JSファイル内

... 
<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>

：

私がTたいです.body-textにあるhtmlを.modal-bodyクラスに移動するか、それと同様の結果を得るようにします。

ここでも、外部のjsファイルでこれを達成しようとしませexample.htmlで

出典

2012-04-16 mstef

それはhrefのように設定することができ、特定のコンテンツを指すために使用することができますように、それはIDを（使用するのが一般的ですモーダルボックスからDOm要素をターゲットにしようとすると、だから、それからちょうどそれをつかむとcmodalに追加し、それがクローンであることができるように

$('#boo').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コンテンツの扱い方

答えて

関連する問題