How to save field values from a coral checkbox in a dialog in page properties

In the end, what I ended up doing is grouping the <coral-checkbox>, the coral-anchorbutton link the show dialog, and the <coral-dialog> in a div with an id. Then I put a .on('coral-overlay:close') listener on the <coral-dialog> element to move the dialog box back into the group so it is back within the form when it the dialog closed.

Here is the revised code:

<%@include file="/libs/foundation/global.jsp"%><%@page import="
java.util.*,
org.apache.sling.api.resource.Resource"%><%
ValueMap componentProps = null;
String pagePath = (request.getAttribute("javax.servlet.include.query_string") != null) ? request.getAttribute("javax.servlet.include.query_string").toString().replace("item=","") : "";
Resource pageResource = resourceResolver.getResource(pagePath);
Page thisPage = pageResource.adaptTo(Page.class);
Resource placeResource = thisPage.getContentResource("custom/place");
String fooCheck = "";
String barCheck = "";
String[] storageSettings = null;
if(placeResource != null){
     componentProps = placeResource.adaptTo(ValueMap.class);
     if(componentProps != null && componentProps.get("storage", String[].class) != null){
          storageSettings = componentProps.get("storage", String[].class);
          for(String s: storageSettings){
               if(s.equals("Foo=foo$true"))
                    fooCheck = "checked";
               if(s.equals("Foo=bar$true"))
                    barCheck = "checked";
          }
     }
}
%>
<div id="foo-group">
    <coral-checkbox name="./custom/place/storage" id="top-foo" class="foo" name="foo" value="Foo=foo$true" <%=fooCheck%>>Foo</coral-checkbox><input class="foundation-field-related" type="hidden" name="./custom/place/storage@Delete">
    <a is="coral-anchorbutton" icon="popOut" iconsize="XS" variant="secondary" onclick="showDialog('foo-dialog')"></a>
    <coral-dialog id="foo-dialog">
        <coral-dialog-header>Foo</coral-dialog-header>
        <coral-dialog-content>
            <coral-checkbox name="./custom/place/storage" data="Foo" id="bar" class="foo" name="foobar" value="Foo=bar$true" <%=barCheck%>>Bar</coral-checkbox><input class="foundation-field-related" type="hidden" name="./custom/place/storage@Delete">
        </coral-dialog-content>
        <coral-dialog-footer><button is="coral-button" variant="primary" coral-close="" class="coral-Button coral-Button--primary" size="M"><coral-button-label>Save &amp; Close</coral-button-label></button></coral-dialog-footer>
    </coral-dialog>
</div>
<script type="text/javascript">
     function showDialog(identifier) {
          var dialog = document.querySelector('#' + identifier);
          dialog.show();
     }
     //Move Coral Dialog box back upon close
     $("coral-dialog").on('coral-overlay:close', function(event) {
          var dialogid = $(this).attr("id");
          var parentid = dialogid.replace("-dialog","-group");
          if (parentid != dialogid && ($("#" + dialogid).length > 0) && ($("#" + parentid).length > 0))
              $("#" + dialogid).appendTo("#" + parentid);
     });
</script>