本机Javascript Alert风格的覆盖删除了新行功能

Native Javascript Alert - style override remove new line functionality

本文关键字:删除 新行 功能 覆盖 Javascript Alert 风格 本机      更新时间:2023-09-26

我使用一个简单的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>。即使可能的话,我也不确定该怎么做。

更改此行:

     msgP.text(msgTxt);

    msgP.html(msgTxt);

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