在 HTML 中使用模态弹出窗口并返回上一页

Question

我正在学习 HTML、CSS、JavaScript 和 Z9778840A0100CB30C582876741B。

以下信息是“上下文”

该场景是一个网站，我可以在其中添加有关狗的信息、有关狗主人的信息并将狗链接到主人。 数据存储在 SQL 数据库中。

我可以成功地添加一条关于狗和主人的记录，并通过将 OwnerTable 主键作为 DogTable 中的外键来链接它们。 都好。

需要能够创建最初没有所有者的狗记录，然后再添加所有者。 或者，当我添加一条狗记录时，我可能会将其分配给数据库中的现有所有者。

假设我正在添加一条狗记录，然后意识到我想链接到不在数据库中的所有者。

现在是问题/问题。

我可以在添加狗页面上添加一个按钮，这将允许我添加一个新主人，同时“中间”添加一条新的狗记录。 在我看来，从我所读到的有两种方法：

1. 只需使用 href 切换到现有的“添加所有者”页面
2. 当我单击添加所有者按钮时，创建一个模式弹出窗口（正确的术语？）

现在 1. 似乎不太理想，因为在添加新所有者后我必须导航回添加狗页面。

2. 看起来更有吸引力，因为工作流程没有中断，就像用户体验是“我需要添加狗，但我需要添加主人。我会快速添加主人，然后继续添加狗，而不会丢失信息我已经输入了关于狗的信息”

但是，我预计 2 的问题是我将有两个执行相同操作的代码实例 - 一个用于添加所有者的“独立”web 页面和一个用于添加所有者的模式弹出窗口。 我担心页面和模式中会有重复的代码 - 如果我需要以某种方式更改“添加所有者”代码，这将导致稍后出现维护问题。

有没有办法绕过这种重复 - 或我可以使用的其他 HTML/JS 工具 - 但仍然保留（1）添加“独立”所有者或（2）在添加新狗记录时添加所有者的能力？

Answer 1

您可以为添加所有者页面和模式版本使用相同的请求端点。 您唯一需要维护的是添加所有者页面。 如果您不使用任何服务器端技术，我认为最简单的方法是将iframe放置在模态中，以便您可以对模态和添加所有者页面使用相同的html文件。 这篇文章有更多关于做Asp.Net所谓的部分partial view的信息

请注意，如果有人在浏览器中禁用了javascript ，则使用纯javascript方法很容易失败。