项目实训(八) —

先前的工作结果，主要是围绕着一份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>

最终弹窗效果如下：

但遗憾的是，上传按钮被点击后，结果页面仍然保持了跳转HTML的形式，这个弹窗没能实现，原因在于：只要使用上传功能，就要给数据一个走向的url，而flask的url和函数对接，这种函数的返回值（新的url或任意html）会让已经写好的弹窗页面瞬间跳转消失。

项目实训(八) —— HTML弹窗相关推荐

项目实训(八):用flask实现文件的上传与下载
我们在项目实训(七)中已经完成了简单的flask应用,但是项目需要一个能够实现功能的接口,因为算法部分还没有确定下来,所以要先实现上传文件和下载文件这俩功能,后期再将算法部分嵌入进去.本篇的代码要和基 ...
【单片机项目实训】八路抢答器
将单片机项目实训--8路抢答器分享出来,如有不足,敬请指出. [实验图片] [实验视频] [项目实训]8路抢答器目录一.设计要求二.方案选择三.硬件电路设计五.其他图片六.资料链接七.关 ...
【单片机项目实训】基于nRF905的多点温度无线采集系统
将单片机项目实训--基于nRF905的多点温度无线采集系统分享出来,如有不足,敬请指出. [实验图片] [实验视频] 基于nRF905的多点温度无线采集系统设计目录目录一.设计要求二.方案设计 ...
C语言编程实训企业计算,C语言编程项目实训
24.C语言编程项目实训(高级)(全日制一个半月,夜班三个月,学费1390元) 理论与实操一体化课程: 一.C语言基础:1.应用C语言的各种特点:2.应用算法的含义.特点.表示方法二.C的基本数据类 ...
【培训】项目实训中遇到的问题总结跟解决方法
[培训] 项目实训中遇到的问题总结跟解决方法参考文章: (1)[培训] 项目实训中遇到的问题总结跟解决方法 (2)https://www.cnblogs.com/TwilightSnow/p ...
BeagleBone Black项目实训手册（大学霸内部资料）
BeagleBone Black项目实训手册(大学霸内部资料) 介绍:本教程是<BeagleBone Black快速入门教程>的后续教程.本教程以项目操作为主,讲解LED项目.声音项目.传 ...
c4d完全学习手册_动态视觉设计就业班，全商业项目实训，一线制作团队10人小班授课，持续提升学习...
CUBE专注动态视觉设计培训.CUBE依托本身设计公司制作资源优势,将培训制作完美结合,开设有北京实体培训课程以及网络案例实战课程. CUBE课程与工作要求完美对接,16周高强度集训,零基础学员毕业后 ...
python实训项目-黑马程序员上海校区Python21期Django项目实训
黑马程序员上海中心月薪一万只是起点关注晚上十点,一名名Python学生正在酣畅淋漓地撸代码,手指不间断地敲击着键盘,发出机械而清脆的声音. 各个小组在经过为期4天的django项目小组开发,终于 ...
python实训项目-Python开发基础-项目实训-在线投票系统.pptx
项目实训-在线投票系统本章任务/30完成"在线投票系统"添加投票候选人删除候选人为候选人投票按序号投票删除投票输出统计信息--本章目标/30理解程序的基本概念会使用顺序.选择.循环 ...

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

项目实训(八) —— HTML弹窗相关推荐

最新文章

热门文章