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 文件中，我想将 html 传递给 modal-body。我知道我可以写以下内容：

$(".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 类中，或者可以得到类似结果的东西。

同样，尝试在外部 js 文件中完成此操作，而不是在 example.html

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 回答