首页 相关文章 网页制作教程:弹出层详解

网页制作教程:弹出层详解

在工作过程中经常遇到做弹出的层效果,有的需要在元素右下弹出,有的需要弹出在浏览器正中间,有的需要弹出后再拖拽,有的需要背景要变暗,有的需要弹出的层跟随鼠标移动

网上此类效果其实很多,有javascript原生的,有基于框架写的,但自己好多时候用不到那么高级的效果,所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除,一种是通过显示和隐藏,其余的具体要做成什么样子,就留给CSS来控制了。下面从最简单的开始(不基于框架)

一、最简单的弹出用到的javascript代码如下:
 
function show(){var oShow = document.getElementById('show');oShow.style.display = 'block';var oClose = document.createElement("span");oClose.innerHTML = "×";oShow.appendChild(oClose);oClose.on...[ 查看全文 ]

2016-02-20 标签:

网页制作教程:弹出层详解的相关文章

手机页面
收藏网站 回到头部