title: Native Javascript Alert - style override remove new line functionality
body: <p>I am using a simple jQuery plugin to style my javascript alerts.  The problem being the usual methods for adding new lines does not appear to work.  Here is the javascript for the plugin, any ideas?</p>
  
  <pre><code>(function($) {
  $.fn.customAlert = function(options) {
      var settings = {
          'alertTitle' : 'Notice!',
          'alertOk'    : 'OK',
          'alertClose' : 'x',
          'draggable'  : false
      };
  
      if (options) $.extend(settings, options);
  
      if(document.getElementById) {
          window.defaultAlert = window.alert;
          window.alert = function(msgTxt) {
              if ($('#modalDiv').length &gt; 0) return; // Only ever show one alert
  
              // The modal div to block out the rest of the document whilst the alert is shown
              var modalDiv = $('&lt;div&gt;&lt;/div&gt;');
              modalDiv.attr('id', 'modalDiv');
              modalDiv.height($(document).height()); // Make overlay cover the whole window
  
              // The alert container
              var alertDiv = $('&lt;div&gt;&lt;/div&gt;');
              alertDiv.attr('id', 'alertDiv');
  
              // The alert title
              var titleH1 = $('&lt;h1&gt;&lt;/h1&gt;');
              titleH1.addClass('titleH1');
              titleH1.text(settings.alertTitle);
  
              // The alert text to display
              var msgP = $('&lt;p&gt;&lt;/p&gt;');
              msgP.text(msgTxt);
  
              // OK button - will remove/close the alert on click
              var okBtn = $('&lt;a&gt;&lt;/a&gt;');
              okBtn.addClass('okBtn');
              okBtn.text(settings.alertOk);
              okBtn.attr('href', '#');
  
              // X button - will remove/close the alert on click
              var closeBtn = $('&lt;span&gt;&lt;/span&gt;');
              closeBtn.addClass('alert-close');
              closeBtn.text(settings.alertClose);
  
              // Append elements to document body
              alertDiv.append(titleH1);
              alertDiv.append(msgP);
              alertDiv.append(okBtn);
              alertDiv.append(closeBtn);
              $('body').append(modalDiv);
              $('body').append(alertDiv);
  
              // Center alert on page
              $('#alertDiv').css('top', ($(window).height()/2) - ($('#alertDiv').height()/2)+'px');
              $('#alertDiv').css('left', ($(window).width()/2) - ($('#alertDiv').width()/2)+'px');
  
              // Make draggable
              if (settings.draggable &amp;&amp; $('#alertDiv').draggable) {
                  $('#alertDiv').draggable({
                      handle: 'h1',
                      opacity: 0.4
                  });
                  $('#alertDiv h1').css('cursor', 'move');
              }
  
              // Bind OK button to remove/close alert
              $('#alertDiv .okBtn, #alertDiv .alert-close').bind('click', function(e) {
                  $('#alertDiv').remove();
                  $('#modalDiv').remove();
                  e.preventDefault();
              });
          };
      }
  };
  })(jQuery);
  </code></pre>
  
  <p>I am guessing its a case of in this above finding /n and adding a <code>&lt;br&gt;</code> or <code>&lt;/p&gt;&lt;p&gt;</code>.  I am unsure how to do that if even possible though.</p>