Question

基本上，我正在构建一个基本的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

中完成

Answer 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();
});

简单的jquery模态插件，如何处理html内容

1 个答案: