项目实训(八) —— HTML弹窗

最新推荐文章于 2025-03-10 11:26:34 发布

B258202

最新推荐文章于 2025-03-10 11:26:34 发布

阅读量1.1k

点赞数 3

文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/B258202/article/details/118684610

版权

这篇博客讲述了如何在先前基于app.py和HTML/CSS的项目基础上，开发食谱上传功能的弹窗。作者通过将upload部分的HTML嵌入到show.html中，并使用CSS进行样式调整，创建了一个弹窗效果。使用JavaScript控制div的显示和隐藏，实现了弹窗的打开和关闭。然而，当点击上传按钮后，由于Flask的URL和函数对接，弹窗未能保持，导致页面跳转。问题在于上传功能的数据流向和URL处理方式与弹窗设计存在冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先前的工作结果，主要是围绕着一份app.py，以及三份HTML和对应的CSS。切换页面既是url和HTML的切换。为了贴合项目要求，今日致力于“食谱上传”功能的弹窗式出现，结果便是合并了show和upload的HTML，将后者内容塞入前者并以弹窗的模式触发。

upload部分的HTML代码借助div嵌套塞入show.html，并在div标签内注明class和id，便于控制（调用自写的js函数，后文再做解释），还有样式的调整：

<div class="window_behind" id='upload_window'>
	<div class="window_appear">
		<div id="header">
		    <div id="header-right" onclick="close_upload()">x</div>
                </div>

           <div class = "upload">
           <form action="/" method="POST" enctype="multipart/form-data">
              <div> <input type="file" name="file"/> </div>                  
              <div> <h3>输入菜名：</h3> <input type = "text" name = "food_name" /> </div>
              <p>
              <div> <h3>输入原料：</h3> <input type = "text" name = "food_material" /> </div>
              <p>
              <div> <input class="button" type="submit" value="上传" onclick="show_result()"/></div>
          </form>
          </div>
       </div>
</div>


<div class = "part">
     <button class="side_button" type="button" onclick="show_upload()">上传菜单</button>
</div>

样式调整借助CSS达成：

.window_behind{
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(99,99,99,0.8);
    width: 100%;
    height: 100%;
}

.window_appear{
    position: relative;
    top: 130px;
    background: #fff;
    width: 25%;
    height: 50%;
    border-radius: 5px;
    margin: 5% auto;
}

#header{
    height: 40px;
}

#header-right{
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    background: rgb(155,13,20);
    color: #fff;
    right: 5px;
    top: 5px;
    text-align: center;
}

其中在背景透明度方面，如果opacity设定遮罩透明度，会同化被该类包裹的弹窗框的透明度，而换成rgba控制则不会，参照网上攻略如下：

js代码可以通过id控制HTML的div内容的出现与消失：

<script type="text/javascript">
	document.getElementById('upload_window').style.display="none";

        function show_upload(){
	   document.getElementById('upload_window').style.display="";
	}

	function close_upload(){
           document.getElementById('upload_window').style.display="none";
	}
</script>

最终弹窗效果如下：