我正在开发一个HTML/JS页面。它有两个容器-容器1和容器2。
在容器1中,我有一个订单输入表。在容器2中,还有一些其他文本和图像。在视图中,container1位于顶部,container2位于底部。
所以我正在做的是在容器1-成功提交订单输入表单后,它会隐藏表单并显示订单确认消息来代替表单。下面的代码对我来说很好:
document.getElementById('form').style.display = 'none'; // hide form
document.getElementById('confirmation_message').style.display = 'block'; //display confirmation message
它隐藏表单并按预期显示确认消息。
但我面临的问题是,在执行上述代码后,container2的数据也在向上移动,并出现在container1上(就在确认消息下方)。此外,当我放大和缩小页面时,它会自动在container2上正确设置container2数据。你能帮我查一下我遗漏了什么财产吗。
请查看bookmywatercan.com。我已经上传了虚拟演示页面。填写表格并提交。谢谢你乱了就会来看看下面的内容上移了。请帮忙。我需要以下内容在同一个地方和容器1在有组织的形式。
谢谢。
如果我正确理解您的问题,如果您希望container2保持在同一个位置,则需要将visibility
值设置为"hidden",而不是将display
值设为"none"。
两者之间的区别之一是,visibility: hidden;
将保持元素放置在页面布局中,而display: none;
将把元素视为根本不存在。
所以试试这个,对于第一行:
document.getElementById('form').style.visibility = 'hidden'; // hide form