The browser's native pop-up box is too ugly to disappear automatically. You can use Jquery to customize a disappearing prompt box.

Style writing refers to bootstrap style.

The static effects are as follows:

First, write a div anywhere in the body of the html page

<div class="tips"></div><!-- prompt box -->

Add a style to the css Style:

.tips{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 200px;
	max-width: 700px;
	transform: translate(-50%,-50%);
	z-index: 99999;
	text-align: center;
	padding: 15px;
	border-radius: 5px;
	}
		
.tips-success {
        color: #3c763d;
        background-color: #dff0d8;
	border-color: #d6e9c6;
	}
		
.tips-info {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
	}
		
.tips-warning {
        color: #8a6d3b;
	background-color: #fcf8e3;
	border-color: #faebcc;
	}
		
.tips-danger {
	color: #a94442;
        background-color: #f2dede;
	border-color: #ebccd1;
	}

Then directly call the following code in the js code block to implement the fade in and fade out prompt box

$('.tips').html('Successful operation').addClass('alert-success').fadeIn().delay(1500).fadeOut();

It can be encapsulated into methods to facilitate the call of various prompt boxes

//Three parameters are provided: prompt text, style and dwell time.
function tips(message, style, time)
{
    style = (style === undefined) ? 'tips-success' : style;
    time = (time === undefined) ? 1200 : time;
    $('<div>')
        .appendTo('body')
        .addClass('alert ' + style)
        .html(message)
        .fadeIn()
        .delay(time)
        .fadeOut();
};

// Success prompt box
function success-tips(message, time)
{
    tips(message, 'alert-success', time);
};

// Failure prompt box
function function fail-tips(message, time)
{
    tips(message, 'alert-danger', time);
};

// Reminder box
function function warning-tips(message, time)
{
    tips(message, 'alert-warning', time);
};

// Message prompt box
 function function info-tips(message, time)
{
    tips(message, 'alert-info', time);
};

Tip: if you follow the above encapsulation method, you don't need to add a div prompt box in the body.

What's more, you can use the style type of tips above to write a prompt box in loading.

The same way: first add a line of code anywhere in the body:

<div align="center" class="loading" ><img alt="" src="../image/Loading4.gif"></div>

Among them, the dynamic gif can be found in qiantu.com, and there are many materials. Just find the right one for the page

Then add the style:

.loading {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 99999;
	padding: 15px;
}

Then add:

$(.loading).show();//display
$(.loading).hide();//hide

ok, it's done!