如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML
2017-02-19 23:23
399 查看
说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素。 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' 更容易、便捷一些。
如何使一个div能够铺满整个页面?
效果如下所示:
![](https://images2015.cnblogs.com/blog/1044137/201703/1044137-20170308012730219-1485484218.png)
这是最简单的一种方式。
如果我们希望当点击某一个按钮时, 这个模态框出现, 将其他内容全部覆盖呢? 并且其下面的内容不可滚动....应该怎么做呢?
首先看下面的例子:
这里我利用将这个div的position: fixed; top: 0; bottom: 0; left: 0; right: 0;可以将这个div占满整个屏幕。
即点击某个按钮之后直接创建一个div,然后利用cssText来填充。
注意: 因为这里直接添加到了 body 上,所以使用absolute和使用fixed得到的结果是类似的。
如下:
即清空outerHTML即可将该元素去除。
如何使一个div能够铺满整个页面?
第一步:提出问题
最近在做项目,希望实现这样一个效果: 在首页的右下角fix一个搜索图片,点击这个搜索图片,就会弹出一个类似模态框的div,这个div会占领整个页面的位置。第二步:使用demo测试
下面我们就利用一个简单的demo测试。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { background-color: #abc; color: white; font-size: 35px; text-align: center; } </style> </head> <body> <div class="fullpage"> 这是一段文字 </div> </body> </html>
效果如下所示:
![](https://images2015.cnblogs.com/blog/1044137/201703/1044137-20170308012730219-1485484218.png)
这是最简单的一种方式。
如果我们希望当点击某一个按钮时, 这个模态框出现, 将其他内容全部覆盖呢? 并且其下面的内容不可滚动....应该怎么做呢?
首先看下面的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullPage</title> <style> * { margin: 0; padding: 0; } html, body, .fullpage { width: 100%; height: 100%; } .fullpage { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #abc; color: white; font-size: 35px; text-align: center; } button { position: fixed; bottom: 50px; right: 50px; background-color: red; } </style> </head> <body> <div class="content"> 快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/>快乐<br/> </div> <button>click to fullpage</button> <div class="fullpage"> 文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/>文字<br/> </div> <script> document.querySelector("button").onclick = function() { document.querySelector(".fullpage").style.display = "block"; } </script> </body> </html>
这里我利用将这个div的position: fixed; top: 0; bottom: 0; left: 0; right: 0;可以将这个div占满整个屏幕。
第三步: 运用到项目中
更好的做法是下面这样的:var model = document.createElement("div"); model.style.cssText = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model);
即点击某个按钮之后直接创建一个div,然后利用cssText来填充。
注意: 因为这里直接添加到了 body 上,所以使用absolute和使用fixed得到的结果是类似的。
如下:
state.ifShowCart = !state.ifShowCart; if (state.ifShowCart == true) { var model = document.createElement("div"); model.id = "Model"; model.style.cssText = "position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7);z-index: 9998;"; document.body.appendChild(model); } else { document.getElementById("Model").outerHTML = ""; }
即清空outerHTML即可将该元素去除。
相关文章推荐
- 如何在页面内制作一个可以实现'另存为'的链接
- DIV+CSS布局入门示例(四)页面顶部 列表<li>制作菜单
- 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹
- EasyUI的Model的Model Window,但是遇到一个问题,就是如何把jsp页面中js的变量传入模态框中input的value
- html如何让div元素铺满整个桌面
- 以类为选择器,如何在响应函数中能够针对指定的DIV进行处理,而不是针对整个类来处理?
- 如何让一个div显示在页面最顶层
- 如何制作一个安全的页面?
- 如何是div充满整个页面
- 两个JSP页面之间如何传递一个对象?比如一个LIST或者HASHMAP?以及为什么有时候REQUEST.GETATTRIBUTE("NAME")取不到值?
- ExtJS学习--如何新建一个窗口并达到遮罩住整个页面的效果
- 如何css控制div始终在整个页面最底部
- java web开发中,jsp使用了frameset框架,如何实现整个页面跳转,并且同一个表单中可以提交两个action
- Phone 7的全景视图(PanoramaItem),如何设置一个Item能够跨越多个Item页面
- 如何实现Jsp下载文件过程中用div遮罩整个页面
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
- eclipse 中main()函数中的String[] args如何使用?通过String[] args验证账号密码的登录类?静态的主方法怎样才能调用非static的方法——通过生成对象?在类中制作一个方法——能够修改对象的属性值?
- 如何快速制作一个H5单页面网站
- 如何让一个div居于页面正中间【实现方法】
- PPT如何一页多张打印且铺满整个页面