javascript - 如何使用jquery优雅地弹出一个div

Question

我正在编写一个 jquery 插件，它将弹出一个窗口。下面是窗口的 html 代码。

html代码并不复杂，但是标签较多。

现在，我有两个选择:

1.将此html代码放在每个页面上，并隐藏此div。如果有点击事件，则弹出此窗口。对于 jquery 来说很容易。

$('.pop_width450').show()

但是如果我这样做，我就不再需要编写插件了，而且，如果我弹出这样的窗口，我必须将窗口html代码放在每个页面中需要弹出一个窗口。

2.第二种方法是将此代码附加到文档中。也许是这样的:

$('<div class="pop_width450">').appendTo(document.body);

这很简单，我的问题是，如果我使用这种方式。 我需要附加很多 html 代码，也许像这样:

var pop = '<div class="pop_width450">'
         +    '<div class="pop_width500_title">Send a Invitation'
         +      '<span><a href><img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /></a></span>'
         +  ...............
         +  ...............

然后:

$(pop).append(document.body);  

你看，html代码pop会很长。我想知道是否有一些优雅的方式来解决此类问题。

下面是我的弹出 html 代码。

欢迎

任何想法。谢谢。

<div class="pop_width450">
    <div class="pop_width500_title">Send a Invitation
        <span>
            <a href="#">
                <img src="imgs/icon/icon_delete_12px.png" border-bottom="0" />
            </a>
        </span>
    </div>
    <div class="pop_width500_content">
        <ul>
            <li class="li480">
                <div class="div100">Name</div>
                <div class="div380">
                    <input name="" class="input300" type="text" />&nbsp;
                </div>
            </li>
            <li class="li480">
                <div class="div100">Subject</div>
                <div class="div380">
                    <input name="" class="input300" type="text" />&nbsp;
                </div>
            </li>
            <li class="li480">
                <div class="div380b">
                    <textarea name="" class="textarea300" cols="" rows=""></textarea></div>
            </li>
            <li class="li480">&nbsp;</li>
            <li class="li480">
                <div class="div380b">
                    <input type="button" class="btn_gray_22" value="Send" />
                </div>
            </li>
            <li class="li480">&nbsp;</li>
        </ul>
    </div>
</div>

Answer 1

既然你使用了jQuery，你至少可以清理你的html，你不必把它写成一个大字符串，你还可以用下面的方法创建元素:

var container = $( '<div/>', {
                    'class': 'pop_width450'
                });

var titleContainer = $( '<div/>', {
                         'class': 'pop_width500_title',
                         text: 'Send An Invitation'
                     }).appendTo( container );

这至少会让你的代码比 HTML 字符串更像 JS，并且你可以通过构建一个函数来自动化该任务，该函数接受数据对象并为你构建任意数量的 HTML，然后你可以在其他项目正在推进