在 HTML 中使用模态弹出窗口并返回上一页
Using modal pop-ups in HTML and returning to previous page
我正在学习 HTML、CSS、JavaScript 和 SQL。
以下信息是"context"
该场景是一个网站，我可以在其中添加有关狗的信息、有关狗主人的信息以及 link 狗给主人的信息。数据存储在 SQL 数据库中。
通过将 OwnerTable 主键作为 DogTable 中的外键，我可以成功添加一条关于狗和主人的记录 link 他们。一切顺利。
需要能够创建一个最初没有所有者的狗记录，然后再添加所有者。或者当我添加一条狗记录时，我可能会将其分配给数据库中的现有所有者。
假设我正在添加一条狗记录然后意识到我想 link 给不在数据库中的主人。
现在是问题。
我可以在添加狗页面上添加一个按钮，这将允许我添加一个新的所有者，同时 "in the middle" 添加一个新的狗记录。在我看来，从我读到的内容来看，有两种方法：
- 只需使用 href
切换到现有 "add owner" 页面
- 当我单击“添加所有者”按钮时创建模式弹出窗口（正确的术语？）
现在 1. 似乎不太理想，因为在添加新主人后我必须导航回添加狗页面。
- 看起来更有吸引力，因为工作流程没有中断，就像用户体验一样 "I need to add a dog but I need to add an owner. I will quickly add an owner and then continue with adding the dog without losing the information I have already typed about the dog"
但是，我预计 2 的问题是我将有两个代码实例执行相同的操作 - 用于添加所有者的 "standalone" 网页和用于添加所有者的模式弹出窗口。我担心的是页面和模式中会有重复的代码 - 如果我需要以某种方式更改 "add owner" 代码，这将导致以后出现维护问题。
是否有解决此重复的方法 - 或我可以使用的其他 HTML/JS 设施 - 但仍然保留以下功能：(1) 添加所有者 "standalone" 或 (2) 添加所有者，同时添加新的狗记录？
您可以对添加所有者页面和模态版本使用相同的请求端点。您唯一需要维护的是添加所有者页面。如果您不使用任何服务器端技术，我认为最简单的方法是在模态中放置一个 iframe，这样您就可以为模态和添加所有者使用相同的 html 文件页。这个 post 有更多关于 Asp.Net 所谓的 partial view 只用香草 javascript - Partial render in HTML/JavaScript
的信息
请注意，如果有人在浏览器中禁用了 javascript，则使用纯 javascript 方法很容易失败。
我正在学习 HTML、CSS、JavaScript 和 SQL。
以下信息是"context"
该场景是一个网站，我可以在其中添加有关狗的信息、有关狗主人的信息以及 link 狗给主人的信息。数据存储在 SQL 数据库中。
通过将 OwnerTable 主键作为 DogTable 中的外键，我可以成功添加一条关于狗和主人的记录 link 他们。一切顺利。
需要能够创建一个最初没有所有者的狗记录，然后再添加所有者。或者当我添加一条狗记录时，我可能会将其分配给数据库中的现有所有者。
假设我正在添加一条狗记录然后意识到我想 link 给不在数据库中的主人。
现在是问题。
我可以在添加狗页面上添加一个按钮，这将允许我添加一个新的所有者，同时 "in the middle" 添加一个新的狗记录。在我看来，从我读到的内容来看，有两种方法：
- 只需使用 href 切换到现有 "add owner" 页面
- 当我单击“添加所有者”按钮时创建模式弹出窗口（正确的术语？）
现在 1. 似乎不太理想，因为在添加新主人后我必须导航回添加狗页面。
- 看起来更有吸引力，因为工作流程没有中断，就像用户体验一样 "I need to add a dog but I need to add an owner. I will quickly add an owner and then continue with adding the dog without losing the information I have already typed about the dog"
但是，我预计 2 的问题是我将有两个代码实例执行相同的操作 - 用于添加所有者的 "standalone" 网页和用于添加所有者的模式弹出窗口。我担心的是页面和模式中会有重复的代码 - 如果我需要以某种方式更改 "add owner" 代码，这将导致以后出现维护问题。
是否有解决此重复的方法 - 或我可以使用的其他 HTML/JS 设施 - 但仍然保留以下功能：(1) 添加所有者 "standalone" 或 (2) 添加所有者，同时添加新的狗记录？
您可以对添加所有者页面和模态版本使用相同的请求端点。您唯一需要维护的是添加所有者页面。如果您不使用任何服务器端技术，我认为最简单的方法是在模态中放置一个 iframe，这样您就可以为模态和添加所有者使用相同的 html 文件页。这个 post 有更多关于 Asp.Net 所谓的 partial view 只用香草 javascript - Partial render in HTML/JavaScript
请注意，如果有人在浏览器中禁用了 javascript，则使用纯 javascript 方法很容易失败。