javascript - native Javascript 警报 - 样式覆盖删除新行功能

Question

我正在使用一个简单的 jQuery 插件来设计我的 javascript 警报。问题是添加新行的常用方法似乎不起作用。这是插件的 javascript，有什么想法吗？

(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);

我猜测上面的情况是找到/n 并添加 <br>或</p><p> 。如果可能的话，我不确定如何做到这一点。

Answer 1

更改此行:

     msgP.text(msgTxt);

至

    msgP.html(msgTxt);

我想你可以使用 <br />和其他 html 标签。