javascript 如何使用jquery优雅地弹出一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20241762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to popup a div elegantly using jquery
提问by diligent
I am writing a jquery plugin, which will popup a window.Below is the window's html code.
我正在编写一个 jquery 插件，它会弹出一个窗口。下面是窗口的 html 代码。
The html code is not complex, but have many tags.
html代码并不复杂，但是标签很多。
Now, I have two choices:
现在，我有两个选择：
1.put this html code on every page, and hidethis div. if there is a click event, popup this window. It is easy for jquery.
1.把这个html代码放在每个页面上，并隐藏这个div。如果有点击事件，则弹出此窗口。对于 jquery 来说很容易。
$('.pop_width450').show()
But if I do this, there is no need for me to write a plugin anymore , what's more, if I popup a window like this, I must put the window html code in every pagewhich need to popup a window.
但是如果我这样做了，我就不用再写插件了，而且，如果我弹出这样的窗口，我必须将窗口html代码放在每个需要弹出窗口的页面中。
2.The second way is append this code to the document. Maybe like this:
2.第二种方式是将此代码附加到文档中。也许是这样的：
$('<div class="pop_width450">').appendTo(document.body);
That's easy, and my question is , If I use this way. I need to append a lot a html code , maybe like this:
这很简单，我的问题是，如果我使用这种方式。我需要附加很多 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>'
+ ...............
+ ...............
Then:
然后：
$(pop).append(document.body);
You see, the html code popwill be very long . I wonder if there is some elegant wayto solve this kind of problem.
你看，弹出的 html 代码会很长。我想知道是否有一些优雅的方法可以解决此类问题。
Below is my popup html code.
下面是我的弹出 html 代码。
Anyideas is welcome. Thanks.
欢迎任何想法。谢谢。
<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" />
</div>
</li>
<li class="li480">
<div class="div100">Subject</div>
<div class="div380">
<input name="" class="input300" type="text" />
</div>
</li>
<li class="li480">
<div class="div380b">
<textarea name="" class="textarea300" cols="" rows=""></textarea></div>
</li>
<li class="li480"> </li>
<li class="li480">
<div class="div380b">
<input type="button" class="btn_gray_22" value="Send" />
</div>
</li>
<li class="li480"> </li>
</ul>
</div>
</div>
回答by kkemple
since you are using jQuery, you can at least clean up your html, you don't have to write it out longhand as a big string, you can also create elements in the following method:
由于您使用的是 jQuery，您至少可以清理您的 html，您不必将其写成一个大字符串，您还可以使用以下方法创建元素：
var container = $( '<div/>', {
'class': 'pop_width450'
});
var titleContainer = $( '<div/>', {
'class': 'pop_width500_title',
text: 'Send An Invitation'
}).appendTo( container );
This will at least keep your code more JS than HTML string, and you can automate the task by building a function that takes an object of data and will build out any amount of HTML for you, then you could reuse the code on other projects moving forward
这至少会让你的代码比 HTML 字符串更像 JS，你可以通过构建一个函数来自动执行任务，该函数接受一个数据对象并为你构建任意数量的 HTML，然后你可以在其他项目上重用代码移动向前
回答by Paddy
Have you considered using something like colorbox and having your popup window be a page in its own right that you serve in colorbox directly.
您是否考虑过使用 colorbox 之类的东西，并使您的弹出窗口本身成为一个页面，您可以直接在 colorbox 中提供服务。
http://www.Hymanlmoore.com/colorbox/
http://www.Hymanlmoore.com/colorbox/
Then you just need common JS code that you could include in a .js file for every page to hook your click and show the colorbox.
然后您只需要通用的 JS 代码，您可以将其包含在每个页面的 .js 文件中，以挂钩您的点击并显示颜色框。
回答by Savaratkar
Write your pop up code in a common file using your second way:
使用第二种方式在一个公共文件中编写弹出代码：
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....
}
Then in whichever page and on control where you wanna show your pop up: (1) first import your JS file and (2) bind that method to the control's click event:
然后在您想要显示弹出窗口的任何页面和控件上：（1）首先导入您的 JS 文件并（2）将该方法绑定到控件的点击事件：
<input type="button" onclick="ShowPopUp()"/>
