如何使用jquery优雅地弹出div

时间:2013-11-27 11:53:08

标签: javascript jquery html popup

我正在编写一个jquery插件,它将弹出一个窗口 .Below是窗口的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>

3 个答案:

答案 0 :(得分:2)

因为你正在使用jQuery,你至少可以清理你的html,你不必将它作为一个大字符串写出来,你也可以用以下方法创建元素:

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

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

这至少会使你的代码比HTML字符串更多JS,你可以通过构建一个获取数据对象的函数来自动化任务,并为你构建任意数量的HTML,然后你可以重用代码其他项目向前推进

答案 1 :(得分:0)

您是否考虑过使用彩盒之类的东西,让您的弹出窗口成为您自己直接在彩色盒中提供的页面。

http://www.jacklmoore.com/colorbox/

然后你只需要常见的JS代码,你可以在每个页面的.js文件中包含你的点击并显示颜色框。

答案 2 :(得分:0)

使用第二种方式将弹出代码写在公共文件中:

function ShowPopUp()
{
    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>'
             +  ...............
             +  ...............
   $(this).html(pop);
//     OR 
    $(this).append(pop); // Test it yourself, which one is preferable for pop up....
    }

然后在你要显示弹出窗口的任何页面和控件中:(1)首先导入你的JS文件,(2)将该方法绑定到控件的click事件:

<input type="button" onclick="ShowPopUp()"/>