在 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方法很容易失敗。