html 如何让微信里的html应用弹出“点击右上角分享到朋友圈”的

html-css010

html 如何让微信里的html应用弹出“点击右上角分享到朋友圈”的,第1张

一个分享按钮，一个隐藏的图片（这个图片绝对定位在右上角）然后就是点击显示，点击隐藏了。

<a href="javascript:" onclick="document.getElementById('mcover').style.display='block'">分享到朋友圈</a>

<div id="mcover" onclick="document.getElementById('mcover').style.display=''" style="display: none">

<img src="/public/images/guide.png">

</div>

对应样式如下：

#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

height: 180px

z-index: 999

}

这是百度的示例，如果你要其他平台的你需要去所在平台的开发者中心查看就行了！

右边：

<!-- Baidu Button BEGIN -->

<script type="text/javascript" id="bdshare_js" data="type=slide&img=0&pos=right&uid=11824" ></script>

<script type="text/javascript" id="bdshell_js"></script>

<script type="text/javascript">

var bds_config = {"bdTop":155}

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours()

</script>

<!-- Baidu Button END -->

左边：

<!-- Baidu Button BEGIN -->

<script type="text/javascript" id="bdshare_js" data="type=slide&img=6&pos=left&uid=15177" ></script>

<script type="text/javascript" id="bdshell_js"></script>

<script type="text/javascript">

var bds_config = {"bdTop":15}

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours()

</script>

<!-- Baidu Button END -->