Verified Commit af4d7b8c authored by Jakob Moser's avatar Jakob Moser
Browse files

Hide overflow when dialog is open in CSS directly (no JS)

parent 2de316dd

header.php

+1 −8
Original line number Diff line number Diff line
@@ -69,21 +69,14 @@ get_header(); 
                <input type="search" name="s" placeholder="Suchen..."><button>🔍</button>

            </form>

            <script>

                const searchModal = document.querySelector("#search-modal")



                searchModal.addEventListener("close", () => {

                    document.body.style.overflow = "";

                });



                function showSearchModal(isEnglish, value) {

                    const searchModal = document.querySelector("#search-modal")

                    searchModal.querySelector("form").action = isEnglish ? "/en/" : "/"



                    const searchInput = searchModal.querySelector("input[type='search']")

                    searchInput.placeholder = isEnglish ? "Search..." : "Suchen..."

                    if(value) searchInput.value = value



                    document.body.style.overflow = "hidden";



                    searchModal.showModal()

                }

            </script>

style.css

+5 −1
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ 
 * Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser

 * Author URI: https://personads.me/

 *

 * Version: 2.17.5

 * Version: 2.17.6

 * Requires PHP: 8.0

 *

 * License: GNU General Public License v3.0
@@ -45,6 +45,10 @@ body { 
    font-size: 17px;

}



body:has(dialog[open]) {

    overflow: hidden;

}



body.has-admin-bar {

    min-height: calc(100vh - 32px);

}