<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.modal {
padding: 10px;
position: fixed;
z-index: 99999;
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
border: none; /* 移除边框 */
width: 250px;
/* height: 150px; 如果需要固定高度,取消注释 */
font-size: 14px;
color: white;
text-align: center;
display: none; /* 初始隐藏 */
line-height: 50px; /*如果模态框只有单行文本并且高度固定,可以使用*/
left: 50%; /* 水平居中定位 */
top: 50%; /* 垂直居中定位 */
transform: translate(-50%, -50%); /* 确保模态框完全居中 */
}
</style>
<script type="text/javascript">
$(function(){
showMessage("这里为提示内容");
});
function showMessage(data) {
// 获取模态框元素
var modal = document.querySelector('.modal');
// 设置模态框的内容
modal.innerHTML = data;
// 显示模态框
modal.style.display = 'block';
// 等待2秒后隐藏模态框
setTimeout(function () {
modal.style.display = 'none';
}, 2000);
}
</script>
</head>
<body>
<!--弹出层start-->
<div class="modal"></div>
<!--弹出层end-->
</body>
</html>
jquery提示框
于 2020-02-23 13:55:07 首次发布