js点击出现悬浮窗效果不使用JQuery插件_javascript技巧

JQuery有很多这样的插件，但是我们公司不用jquery，没有插件，所以我就试着自己写，我也不知道别人是怎么写的，纯粹是按着自己的想法来的。

直接上代码：

复制代码 代码如下:

Click

• Demo 1


• Demo 2


• Demo 3


• Demo 4


• Demo 5

复制到本地就可以测试了。

这里要说一下cancelBubble这两个东西。因为我做的效果是点击按钮就显示div，点击页面的任意位置div就消失，但javascript的冒泡机制是button获得一个onclick事件后，往上冒泡，dom在获得一个onclick事件，这样的话就和让div消失的onclick事件冲突了，所以需要event.cancelBubble = true;这行代码来停止冒泡。大体就是这样，代码很简单。