第一部分 html代碼部分

• <link rel="stylesheet" href="content.css" />
•  
•  
• <div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display:none;">
•                     <img src="SELF_PUBLIC/Img/guide.png" />
•                 </div>
•  
•    <div class="text" id="content">
•                     <div id="mess_share">
•                         <div id="share_1">
•                             <button class="button2" onclick="document.getElementById('mcover').style.display='block';">
•                                 <img src="SELF_PUBLIC/Img/icon_msg.png" width="64" height="64" />
•                                  發送給朋友
•                             </button>
•                         </div>
•                         <div id="share_2">
•                             <button class="button2" onclick="document.getElementById('mcover').style.display='block';">
•                                 <img src="SELF_PUBLIC/Img/icon_timeline.png" width="64" height="64" />
•                                  分享到朋友圈
•                             </button>
•                         </div>
•                         <div class="clr"></div>
•                     </div>
•                 </div>

第二部分：css代碼段
  • #mcover {
  •     position: fixed;
  •     top: 0;
  •     left: 0;
  •     width: 100%;
  •     height: 100%;
  •     background: rgba(0, 0, 0, 0.7);
  •     display: none;
  •     z-index: 20000;
  • }
  • #mcover img {
  •     position: fixed;
  •     right: 18px;
  •     top: 5px;
  •     width: 260px!important;
  •     height: 180px!important;
  •     z-index: 20001;
  • }
  • .text {
  •     margin: 15px 0;
  •     font-size: 14px;
  •     word-wrap: break-word;
  •     color: #727272;
  • }
  • #mess_share {
  •     margin: 15px 0;
  •     display: block;
  • }
  • #share_1 {
  •     float: left;
  •     width: 49%;
  •     display: block;
  • }
  • #share_2 {
  •     float: right;
  •     width: 49%;
  •     display: block;
  • }
  • .clr {
  •     display: block;
  •     clear: both;
  •     height: 0;
  •     overflow: hidden;
  • }
  • .button2 {
  •     font-size: 16px;
  •     padding: 8px 0;
  •     border: 1px solid #adadab;
  •     color: #000000;
  •     background-color: #e8e8e8;
  •     background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);
  •     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 1px #efefef;
  •     text-shadow: 0.5px 0.5px 1px #fff;
  •     text-align: center;
  •     border-radius: 3px;
  •     width: 100%;
  • }
  • #mess_share img {
  •     width: 22px!important;
  •     height: 22px!important;
  •     vertical-align: top;
  •     border: 0;
  • }
  •  
  •  
  • /**********************audio***********************/
  • .btn_music{
  •     display:inline-block;
  •     width:35px;
  •     height:35px;
  •     background:url('../../img/play.png') no-repeat center center;
  •     background-size:100% auto;
  •     position:absolute;
  •     z-index:100;
  •     left:15px;
  •     top:20px;
  • }
  • .btn_music.on{
  •     background-image:url('../../img/stop.png');
  • }
  •  
  • /******************************動畫*************************/
  • #iframe_screen{
  •     background:#fff;
  •     position:absolute;
  •     width:100%;
  •     height:100%;
  •     left:0;
  •     top:0;
  •     z-index:300000;
  •     overflow:hidden;
  • }