Use modal

src/registrar/assets/js/get-gov-admin.js

@@ -23,6 +23,33 @@ function openInNewTab(el, removeAttribute = false){
 // <<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>><<>>
 // Initialization code.
 
+/** An IIFE for pages in DjangoAdmin that use modals.
+ * Dja strips out form elements, and modals generate their content outside
+ * of the current form scope, so we need to "inject" these inputs.
+*/
+(function (){
+    function createPhantomModalFormButtons(){
+        let submitButtons = document.querySelectorAll('.usa-modal button[type="submit"]');
+        form = document.querySelector("form")
+        submitButtons.forEach((button) => {
+
+            let input = document.createElement("input");
+            input.type = "submit";
+            input.name = button.name;
+            input.value = button.value;
+            input.style.display = "none"
+
+            // Add the hidden input to the form
+            form.appendChild(input);
+            button.addEventListener("click", () => {
+                console.log("clicking")
+                input.click();
+            })
+        })
+    }
+
+    createPhantomModalFormButtons();
+})();
 /** An IIFE for pages in DjangoAdmin which may need custom JS implementation.
  * Currently only appends target="_blank" to the domain_form object,
  * but this can be expanded.
@@ -44,24 +71,6 @@ function openInNewTab(el, removeAttribute = false){
             domainSubmitButton.addEventListener("mouseover", () => openInNewTab(domainFormElement, true));
             domainSubmitButton.addEventListener("mouseout", () => openInNewTab(domainFormElement, false));
         }
-        
-        let extendExpirationDateButton = document.getElementById("extend-expiration-button")
-        let confirmationButtons = document.querySelector(".admin-confirmation-buttons")
-        let cancelExpirationButton = document.querySelector(".cancel-extend-button")
-        if (extendExpirationDateButton && confirmationButtons && cancelExpirationButton){
-
-            // Tie logic to the extend button to show confirmation options
-            extendExpirationDateButton.addEventListener("click", () => {
-                extendExpirationDateButton.hidden = true
-                confirmationButtons.hidden = false
-            })
-
-            // Tie logic to the cancel button to hide the confirmation options
-            cancelExpirationButton.addEventListener("click", () => {
-                confirmationButtons.hidden = true
-                extendExpirationDateButton.hidden = false
-            })
-        }
     }
 
     prepareDjangoAdmin();

src/registrar/assets/sass/_theme/_admin.scss

@@ -278,3 +278,10 @@ h1, h2, h3,
 input.admin-confirm-button{
     text-transform: none !important;
 }
+
+
+// Button groups in /admin incorrectly have bullets.
+// Remove that!
+.usa-modal__footer .usa-button-group__item{
+    list-style-type: none;
+}

src/registrar/templates/django/admin/domain_change_form.html

@@ -17,7 +17,14 @@
                 <span>&nbsp;</span>
                 <input class="cancel-extend-button" type="button" value="Cancel">
             </span>
-            <input id="extend-expiration-button" type="button" value="Extend expiration date" class="custom-link-button">
+            <a
+            class="text-middle"
+            href="#toggle-extend-expiration-alert"
+            aria-controls="toggle-extend-expiration-alert"
+            data-open-modal
+            >
+                Extend expiration date
+            </a>
             <span class="margin-left-05 margin-right-05 text-middle"> | </span>
             {% endif %}
             {% if original.state == original.State.READY %}
@@ -35,3 +42,60 @@
     </div>
     {{ block.super }}
 {% endblock %}
+
+{% block submit_buttons_bottom %}
+<div
+            class="usa-modal"
+            id="toggle-extend-expiration-alert"
+            aria-labelledby="Are you sure you want to extend this expiration date?"
+            aria-describedby="This expiration date will be extended."
+            >
+                <div class="usa-modal__content">
+                    <div class="usa-modal__main">
+                        <h2 class="usa-modal__heading" id="modal-1-heading">
+                            Are you sure you want to extend this expiration date?
+                        </h2>
+                        <div class="usa-prose">
+                            <p id="modal-1-description">
+                                This action will extend the expiration date by a year.
+                            </p>
+                        </div>
+                
+                        <div class="usa-modal__footer">
+                            <ul class="usa-button-group">
+                                <li class="usa-button-group__item">
+                                    <button
+                                    id="extend_expiration_date_button"
+                                    type="submit" 
+                                    class="usa-button dja-form-placeholder" 
+                                    name="_extend_expiration_date"
+                                    >
+                                        Confirm
+                                    </button>
+                                </li>
+                                <li class="usa-button-group__item">
+                                    <button
+                                    type="button"
+                                    class="usa-button usa-button--unstyled padding-105 text-center"
+                                    data-close-modal
+                                    >
+                                        Cancel
+                                    </button>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <button
+                    type="button"
+                    class="usa-button usa-modal__close"
+                    aria-label="Close this window"
+                    data-close-modal
+                    >
+                        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                            <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+{{ block.super }}
+{% endblock %}