简单的jQuery模式插件，如何处理HTML内容

Question

Basically, i'm building a basic jquery modal plugin as practice, and as much as the many varieties out in the wild have been helpful for reference, I wasn't sure about the best method for pushing html into the modal that is being built in my jQuery. 基本上，我是在实践中构建一个基本的jQuery模态插件，并且尽可能多的野外变种可供参考，但我不确定将html插入正在构建的模态中的最佳方法在我的jQuery中。

This code is building my popups: 这段代码正在构建我的弹出窗口：

        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);

In an html file that is calling the javascript file with the above code, I would like to pass html to modal-body. 在使用上述代码调用javascript文件的html文件中，我想将html传递给modal-body。 I know I could just write the following: 我知道我可以写以下内容：

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

but I would like to make the plugin handle as much as possible, so what would be the best way to do the following: 但我想让插件尽可能地处理，因此执行以下操作的最佳方法是什么：

in example.html: 在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>

in the js file: 在js文件中：

I would like to take the html that is in .body-text and move it into the .modal-body class, or something that will get me similar results. 我想将.body-text中的html移到.modal-body类中，否则将获得相似的结果。

Again, trying to accomplish this in the external js file, and not in example.html 同样，尝试在外部js文件而不是example.html中完成此操作

Answer 1

It's common to use IDs (as it can be set as the href and can be used to point to the given content of a link) instead when trying to target DOm element from modal boxes. 尝试从模式框中定位DOm元素时，通常会使用ID（因为可以将其设置为href，并且可以用于指向链接的给定内容）。 So you could do 所以你可以做

Some content to be in the modal 模态中的一些内容

Then just grab it and append it to the cmodal 然后抓住它并将其附加到模式

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

You can also have an option so that it can be clone and left the original copy behind 您还可以选择一个选项，以便对其进行克隆并将原始副本留在后面

$('.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();
});

You can technically handle classes as well but after depends how your plugin is built. 从技术上讲，您也可以处理类，但是这取决于插件的构建方式。 As you can grab all and generate a single modal content or create the multiple content to browse between using them. 正如您可以抓住所有内容并生成单个模式内容一样，或者创建多个内容以在使用它们之间进行浏览。

 $('.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 个解决方案

解决方案1
1 已采纳 2012-04-16 06:30:45

简单的jQuery模式插件，如何处理HTML内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-16 06:30:45

解决方案1
1 已采纳 2012-04-16 06:30:45