其次,html模板可以加载出来,不一定静态文件(也就是html所引用引用以及链接的css和js文件)也加载出来了,项目运行后,在控制台可以清楚的看到,哪一个文件没有被读取,一般都是路径问题。这需要根据你的情况设置sertings.py。
最后,关于bootstrap,给你一个简单的办法,你可以直接在html模板中使用cnd上的bootstrap文件,这样就无需设置静态路径了。
在JavaScript中,一般有三种常见的模态框(Modal):纯CSS模态框:这种模态框是使用HTML和CSS实现的,没有任何JavaScript代码。它通过设置CSS属性来实现模态框的遮罩层和d出框,可以在网页中快速实现模态框的效果。但是,由于没有JavaScript支持,其功能比较受限。
JavaScript模态框:这种模态框是使用JavaScript编写的,通过动态创建HTML元素和设置CSS属性来实现。它可以实现更多的交互功能,如d出框内嵌表单、拖动、缩放等效果,但是需要一定的JavaScript编程经验。
第三方插件模态框:这种模态框是使用第三方插件实现的,如Bootstrap框架中的Modal插件、jQuery UI中的Dialog插件等。它们提供了丰富的配置选项和API接口,可以方便地实现各种模态框效果,并且通常具有跨浏览器兼容性和良好的用户体验。但是,需要引入额外的插件文件,并且可能会增加网页加载时间。
用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>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)