title: how to popup a div elegantly using jquery
body: <p>I am writing a jquery plugin, which will <strong>popup a window</strong>.Below is the window's html code.</p>
  
  <p>The html code is not complex, but have many tags. </p>
  
  <p>Now, I have two choices:</p>
  
  <p>1.put this html code on <strong>every page</strong>, and <strong>hide</strong> this div. if there is a click event, popup this window. It is easy for jquery. </p>
  
  <pre><code>$('.pop_width450').show()
  </code></pre>
  
  <p>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 <strong>in every page</strong> which need to popup a window.</p>
  
  <p>2.The second way is append this code to the document. Maybe like this:</p>
  
  <pre><code>$('&lt;div class="pop_width450"&gt;').appendTo(document.body);
  </code></pre>
  
  <p>That's easy,  and my question is , If I use this way. 
     I need to append a lot a html code , maybe like this:</p>
  
  <pre><code>var pop = '&lt;div class="pop_width450"&gt;'
           +    '&lt;div class="pop_width500_title"&gt;Send a Invitation'
           +      '&lt;span&gt;&lt;a href&gt;&lt;img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /&gt;&lt;/a&gt;&lt;/span&gt;'
           +  ...............
           +  ...............
  </code></pre>
  
  <p>Then:</p>
  
  <pre><code>$(pop).append(document.body);  
  </code></pre>
  
  <p>You see, the html code <strong>pop</strong> will be very long . I wonder if there is some <strong>elegant way</strong> to solve this kind of problem.</p>
  
  <p>Below is my popup html code.</p>
  
  <p><strong>Any</strong> ideas is welcome. Thanks.  </p>
  
  <pre><code>&lt;div class="pop_width450"&gt;
      &lt;div class="pop_width500_title"&gt;Send a Invitation
          &lt;span&gt;
              &lt;a href="#"&gt;
                  &lt;img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /&gt;
              &lt;/a&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="pop_width500_content"&gt;
          &lt;ul&gt;
              &lt;li class="li480"&gt;
                  &lt;div class="div100"&gt;Name&lt;/div&gt;
                  &lt;div class="div380"&gt;
                      &lt;input name="" class="input300" type="text" /&gt;&amp;nbsp;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="li480"&gt;
                  &lt;div class="div100"&gt;Subject&lt;/div&gt;
                  &lt;div class="div380"&gt;
                      &lt;input name="" class="input300" type="text" /&gt;&amp;nbsp;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="li480"&gt;
                  &lt;div class="div380b"&gt;
                      &lt;textarea name="" class="textarea300" cols="" rows=""&gt;&lt;/textarea&gt;&lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="li480"&gt;&amp;nbsp;&lt;/li&gt;
              &lt;li class="li480"&gt;
                  &lt;div class="div380b"&gt;
                      &lt;input type="button" class="btn_gray_22" value="Send" /&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="li480"&gt;&amp;nbsp;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>