怎么实现模态窗口

怎么实现模态窗口,第1张

用CSS和JS改变z-index的属性值就可以实现模态

[html] view plain copy

<html>

<head>

<title>modal box</title>

<style type="text/css">

*{

margin:0px

padding:0px

}

</style>

</head>

<body>

<!--先在CSS里面把zindex的值设为负值让其在背景图片后面-->

<div style="background:url(http://pic.90sjimg.com/back_pic/00/04/27/49/5b1eee8bdba7b9aefc62fccafe72737c.jpg)width:100%height:800pxz-index:1">

<button id="modal-box">d框</button>

<div id="modal-show" style="position:fixedz-index:-9999width:100%height:100%background-color:rgba(236, 214, 214, 0.2)">

</div>

<div id="modal-show2" style="position:fixedz-index:-9999width:30%height:30%margin:200px autoborder:1px solid red">

欢迎你登录

</div>

</div>

<script type="text/javascript">

document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面

{

document.getElementById("modal-show").style.zIndex = "1"

document.getElementById("modal-show2").style.zIndex = "1"

}

document.getElementById("modal-show").onclick=function()//点击模态框的透明背景时,模态框的zIndex值变为-9999,会隐藏在

{<span style="white-space:pre"></span>背景图片的后面,点击模态框本身是不会消失的<span style="white-space:pre">

</span>

this.style.zIndex = "-9999"

document.getElementById("modal-show2").style.zIndex = "-9999"

}

</script>

</body>

</html>

首先bootstrap的modal能不能d出来和URL是没有任何关系的!

其次,html模板可以加载出来,不一定静态文件(也就是html所引用引用以及链接的css和js文件)也加载出来了,项目运行后,在控制台可以清楚的看到,哪一个文件没有被读取,一般都是路径问题。这需要根据你的情况设置sertings.py。

最后,关于bootstrap,给你一个简单的办法,你可以直接在html模板中使用cnd上的bootstrap文件,这样就无需设置静态路径了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6256774.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存