0

基本的に、私は練習として基本的な jquery モーダル プラグインを構築しています。実際に出回っている多くの種類が参照に役立ちますが、構築中のモーダルに html をプッシュするための最良の方法について確信が持てませんでした。私のjQueryで。

このコードは私のポップアップを構築しています:

        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ファイルで、modal-bodyにhtmlを渡したいと思います。私は次のように書くことができることを知っています：

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

しかし、プラグインを可能な限り処理したいので、次のことを行う最良の方法は何ですか:

example.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ファイルで：

.body-text にある html を取得して、それを .modal-body クラス、または同様の結果が得られる何かに移動したいと思います。

繰り返しますが、example.html ではなく、外部 js ファイルでこれを達成しようとしています。

4

1 に答える 1

1

モーダル ボックスから DOm 要素をターゲットにしようとするときは、代わりに ID を使用するのが一般的です (href として設定でき、リンクの特定のコンテンツを指すために使用できるため)。だからあなたはできる

モーダルにするコンテンツ

次に、それをつかんで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-16T06:30:45.040 に答える