现在想要弹框美观都不用alert而是，显示一个精心设计美观的DIV，也有一个确认按钮。这样就可以任意设计了。想有什么都可以
不过还是忠告你一声，要系统的学习一下。而且，不要把时间和经历放在这样没有用处的功能上，要关心最关键的东西，让自己的效率最大化
这是一个弹框的实例
http://www.scriptlover.com/controls/prompt/
这是我的学习心得
http://blog.everalan.com/102.html
希望对你有帮助
<!DOCTYPE html><html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>showPic图片库</title>
<style type="text/css">
#RePicture img{
width:200px
height:200px
}
</style>
</head>
<body>
<h2>这是一个图片库</h2>
<ul>
<li><a href="1.jpg" onclick="showPic(this)op.innerHTML=this.innerHTMLreturn false">我好可爱呢</a></li>
<li><a href="2.jpg" onclick="showPic(this)op.innerHTML=this.innerHTMLreturn false">民国哭的表情包</a></li>
<li><a href="3.gif" onclick="showPic(this)op.innerHTML=this.innerHTMLreturn false">新新超人</a></li>
<li><a href="4.jpg"onclick="showPic(this)op.innerHTML=this.innerHTMLreturn false">月月唱歌</a></li>
</ul>
<div id="RePicture">
<img src="1.jpg">
<p id="tip">这是一张我好可爱呢的表情包</p>
</div>
<script>
function showPic(index){
var RePicture = document.getElementById("RePicture")
var img = RePicture.getElementsByTagName("img")[0]
img.setAttribute("src",index)
}
var op= document.getElementById("tip")
</script>
</body>
</html>
可以参考一下
这个再编程中，很常见，也有很多种写法，介绍两种。1.图标用img标签显示，再img标签点击后，更改img的src属性，改变图标，将原来的空心换成红心的图片。
2.图标用css控制，设置background-image显示空心的背景图片，这里图片最好是png的，点击后换成红心的图片。
无论哪种，注意记录用户的点击行为，下次进去后直接显示红心的图标。比如百度app的点赞，要记录用户再哪个帖子点赞了，下次该用户再查看这个帖子的时候，默认显示点赞后的图标。
