I am writing a jquery plugin, which will popup a window.Below is the window's html code.
The html code is not plex, but have many tags.
Now, I have two choices:
1.put this html code on every page, and hide this div. if there is a click event, popup this window. It is easy for 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 page which need to popup a window.
2.The second way is append this code to the document. Maybe like this:
$('<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:
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 pop will be very long . I wonder if there is some elegant way to solve this kind of problem.
Below is my popup html code.
Any ideas is wele. 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>
I am writing a jquery plugin, which will popup a window.Below is the window's html code.
The html code is not plex, but have many tags.
Now, I have two choices:
1.put this html code on every page, and hide this div. if there is a click event, popup this window. It is easy for 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 page which need to popup a window.
2.The second way is append this code to the document. Maybe like this:
$('<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:
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 pop will be very long . I wonder if there is some elegant way to solve this kind of problem.
Below is my popup html code.
Any ideas is wele. 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>
- There is no elegant way, code is code and you must write it all, or make universal modal box and then put form in it, but again for what you need there is no short codes. – Milan and Friends Commented Nov 27, 2013 at 12:00
- thanks @mdesdev, yes, code is code, no short codes. Thanks. – diligent Commented Nov 27, 2013 at 12:32
3 Answers
Reset to default 2since 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:
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
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.
http://www.jacklmoore./colorbox/
Then you just need mon JS code that you could include in a .js file for every page to hook your click and show the colorbox.
Write your pop up code in a mon 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:
<input type="button" onclick="ShowPopUp()"/>