Question

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?

(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 > 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 = $('<div></div>');
            modalDiv.attr('id', 'modalDiv');
            modalDiv.height($(document).height()); // Make overlay cover the whole window

            // The alert container
            var alertDiv = $('<div></div>');
            alertDiv.attr('id', 'alertDiv');

            // The alert title
            var titleH1 = $('<h1></h1>');
            titleH1.addClass('titleH1');
            titleH1.text(settings.alertTitle);

            // The alert text to display
            var msgP = $('<p></p>');
            msgP.text(msgTxt);

            // OK button - will remove/close the alert on click
            var okBtn = $('<a></a>');
            okBtn.addClass('okBtn');
            okBtn.text(settings.alertOk);
            okBtn.attr('href', '#');

            // X button - will remove/close the alert on click
            var closeBtn = $('<span></span>');
            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 && $('#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);

I am guessing its a case of in this above finding /n and adding a <br> or </p><p>. I am unsure how to do that if even possible though.

Answer 1

Change this line:

     msgP.text(msgTxt);

to

    msgP.html(msgTxt);

and I think then you can use <br /> and other html tags.