方法一：推薦使用 彈層元件文檔 - layui.layer,他家的彈窗類似于自定義内容，上手也很容易，js和css引入，直接粘貼添加自己的内容即可用，例如自定義彈窗：
代碼：
layer.open({
title: '提示'
,content: 'hello'
});
一段時間後自動消失且不需要任何操作的提示框：
代碼：
layer.msg('hello'); 官網給的示例代碼：
//資訊框-例1
layer.alert('見到你真的很高興', {icon: 6});
//資訊框-例2
layer.msg('你确定你很帥麼？', {
time: 0 //不自動關閉
,btn: ['必須啊', '醜到爆']
,yes: function(index){
layer.close(index);
layer.msg('雅蠛蝶 O.o', {
icon: 6
,btn: ['嗷','嗷','嗷']
});
}
});
//資訊框-例3
layer.msg('這是最常用的吧');
//資訊框-例4
layer.msg('不開心。。', {icon: 5});
//資訊框-例5
layer.msg('玩命賣萌中', function(){
//關閉後的操作
});
//頁面層-自定義
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'yourclass',
content: '自定義HTML内容'
});
//頁面層-圖檔
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //沒有背景色
shadeClose: true,
content: $('#tong')
});
//iframe層-父子操作
layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: 'test/iframe.html'
});
//iframe層-多媒體
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '//player.youku.com/embed/XMjY3MzgzODg0'
});
layer.msg('點選任意處關閉');
//iframe層-禁滾動條
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', //加上邊框
content: ['mobile/', 'no']
});
//加載層-預設風格
layer.load();
//此處示範關閉
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加載層-風格2
layer.load(1);
//此處示範關閉
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加載層-風格3
layer.load(2);
//此處示範關閉
setTimeout(function(){
layer.closeAll('loading');
}, 2000);
//加載層-風格4
layer.msg('加載中', {
icon: 16
,shade: 0.01
});
//打醬油
layer.msg('尼瑪，打個醬油', {icon: 4});
//tips層-上
layer.tips('上', '#id或者.class', {
tips: [1, '#0FA6D8'] //還可配置顔色
});
//tips層-右
layer.tips('預設就是向右的', '#id或者.class');
//tips層-下
layer.tips('下', '#id或者.class', {
tips: 3
});
//tips層-左
layer.tips('左邊麼麼哒', '#id或者.class', {
tips: [4, '#78BA32']
});
//tips層-不銷毀之前的
layer.tips('不銷毀之前的', '#id或者.class', {
tipsMore: true
});
//預設prompt
layer.prompt(function(val, index){
layer.msg('得到了'+val);
layer.close(index);
});
//屏蔽浏覽器滾動條
layer.open({
content: '浏覽器滾動條已鎖',
scrollbar: false
});
//彈出即全屏
var index = layer.open({
type: 2,
content: 'http://layim.layui.com',
area: ['320px', '195px'],
maxmin: true
});
layer.full(index);
//正上方
layer.msg('靈活運用offset', {
offset: 't',
anim: 6
});
//更多例子
layer.msg('Hi');
這裡，面應該有你需要的那一款。
方法二：自定義一段時間後自己消失的提示框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 點選按鈕，傳遞顯示資料 -->
<button id="btn" onclick="func('修改成功')" οnclick>btn</button>
</body>
<script>
// 建立一個div
var lunbo=document.createElement("div");
// 設定div的id值
lunbo.id="lunbo";
// 上面按鈕點選事件
function func(date){
/* 建立div的樣式，寬200px,高80px，下面的是css樣式居中，
*
*/
var style={
background:"#f00",
position:"absolute",
zIndex:10,
width:"200px",
height:"80px",
left:"50%",
top:"50%",
marginLeft:"-100px",
marginTop:"-40px",
color:"white"
}
for(var i in style)
lunbo.style[i]=style[i];
// 當找不到id為lunbo的控件時
if(document.getElementById("lunbo")==null){
// 在body中添加lunbo控件（lunbo在上面建立的）
document.body.appendChild(lunbo);
// 顯示内容
lunbo.innerHTML=date;
// 文本居中
lunbo.style.textAlign="center";
lunbo.style.lineHeight="80px"; // 作用是調節字型行高與div同高，使其保持水準居中
// 設定2s後去掉彈出窗
setTimeout("document.body.removeChild(lunbo)",2000)
}
}
</script>
</html>