fix bootstrap modal stacking

ethpandaops · Oct 14, 2024 · 2916774 · 2916774
1 parent f0a6e66
commit 2916774
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git a/static/js/common.js b/static/js/common.js
@@ -0,0 +1,6 @@
+  // Fix bootstrap backdrop stacking when having multiple modals
+  $(document).on('show.bs.modal', '.modal', function() {
+    const zIndex = 1040 + 10 * $('.modal:visible').length;
+    $(this).css('z-index', zIndex);
+    setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
+  });
diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -535,6 +535,7 @@ <h5 class="modal-title" id="peerDasWarningsModal">👀 PeerDAS: Some problems we
 <script src="/js/vendor/cytoscape-fcose.js"></script>
 <script src="https://cytoscape.org/cytoscape.js-cxtmenu/cytoscape-cxtmenu.js"></script>
 <script src="/js/cytoscape-network-aux.js"></script>
+<script src="/js/common.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");
   var data = {{ .PeerMap }};

diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
@@ -278,6 +278,7 @@ <h2 class="accordion-header">
 <script src="/js/vendor/cytoscape-cose-base.js"></script>
 <script src="/js/vendor/cytoscape-fcose.js"></script>
 <script src="/js/cytoscape-network-aux.js"></script>
+<script src="/js/common.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");
   var data = {{ .PeerMap }};