https://jsfiddle.net/08wLdn1w/8/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="softm">
<meta name="Keywords" content="softm.net">
<meta name="Description" content="Toast Test">
<title>Toast Test</title>
</head>
<style>
.error {
width:200px;
/* height:20px;*/
height:auto;
position:absolute;
left:50%;
margin-left:-100px;
bottom:10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding:10px;
text-align:center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("<div class='error'/>").css("display","none").appendTo("body");
window.toast = function(msg) {
$(".error").text(msg).fadeIn(500).fadeOut(2000);
};
$("#btn_test").click(function() {
toast("toast test");
});
});
</script>
<body>
<button id="btn_test">toast</button>
</body>
</html>
댓글