弹出消息的遮罩层

<style>
  #my_msg_bg {
    width:100%;
    height:100%;
    background: #000;
    position:absolute;
    top:0;
    left:0;
    opacity: 0.6;
    display: none;
  }
  #my_div {
    width:100%;
    position:absolute;
    top:10%;
    left:0;
    display: none;
  }
  #my_p {
    width:80%;
    max-width:800px;
    padding:20px;
    box-sizing: border-box;
    background: #fff;
    border:1px solid #000;
    border-radius:8px;
    text-align: center;
    color:#666;
    margin:0 auto;
    position: relative;
  }
  #my_div button {
    position:absolute;
    top:0;
    right:0;
    width:30px;
    height:30px;
    border:none;
    box-shadow:0 0 1px rgba(0,0,0,1) inset;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    opacity: 0.5;
  }
</style>
<div id="my_msg_bg"></div>
<div id="my_div">
  <p id="my_p">
    <button onclick="hide_msg()">X</button>
    <span id="my_msg">这里显示信息</span>
  </p>
</div>
<script src="jquery-2.1.0.min.js"></script>
<script>
  show_msg();
  function show_msg() {
    $("#my_msg_bg").fadeIn("slow");
    $("#my_div").fadeIn("slow");
    // setTimeout(function(){
    // 	$("#my_msg").slideUp("slow");
    // 	$("#my_div").slideUp("slow");
    // },2000);
  }
  function hide_msg() {
    $("#my_msg_bg").fadeOut("fast");
    $("#my_div").fadeOut("fast");
  }
</script>