CSS3地图热点文字标注提示

所属分类:UI-弹出层

 42376  415  查看评论 (8)
分享到微信朋友圈
X
CSS3地图热点文字标注提示 ie兼容10

先引入插件

<script src="js/modernizr.js"></script>
<script src='js/angular.js'></script>

插入一张地图,然后在地图上通过定位到需要标示的位置添加按钮

<img src="..">
    <button class="map-point" style="top:15%;left:35%">
        <div class="content">..</div>
    </button>
    <button class="map-point" style="top:35%;left:50%">
        <div class="content">..</div>
    </button>
    ....


相关插件-弹出层

CSS3地图热点文字标注提示

当点击地图上的某一位置时,会弹出提示。
  弹出层
 42377  415

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 33029  392

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 39340  361

jquery 弹出层

多功能表单弹出层插件,可自定义,附带可运行
  弹出层
 98995  718

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    「爱胡萝卜と??」 0
    2019/1/10 9:51:18
    0
    2017/9/13 11:56:48

    我稍微改了一点东西,比如弹出框里的东西比较多我加了个overflow:auto;谷歌可以,但是火狐的滚动条没有反应。IE有时候是图片可以打开,但文字弹不出来。有些是弹出框可以打开,但是图片加载不了。

    回复
    0
    2017/9/13 11:50:10
    首先谢谢你提供的插件,我是新手菜鸟,请问一下IE实现不了怎么呢 回复
    非州雄狮 0
    2016/11/19 16:11:22
    世界地图很好的 回复
    小蔡 0
    2016/3/4 15:03:50
    用手机点击的时候没办法弹出框是怎么回事?
        O烈烈0
        2017/8/4 15:12:50
        应该是没点到焦点,你放大试下就知道了
    回复
    ★心海★★☆ 0
    2015/12/15 11:12:01

    真不错的效果

        zjwz1230
        2015/12/17 20:12:43

        谢谢

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复