SomeGuy
/
sessioncommunities.online
Archived
1
0
Fork 1
Code Issues 13 Pull Requests 3 Activity

Make modals closeable

Browse Source
pull/1/head
mdPlusPlus 3 years ago
parent 083d111794
commit ff344f06f7
3 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File

2
html_generator.php
Unescape Escape View File

@ -154,7 +154,7 @@
$modal_html = $modal_html =
"<div id=\"modal_" . $id . "\" class=\"qr-code-modal\">" . PHP_EOL . "<div id=\"modal_" . $id . "\" class=\"qr-code-modal\">" . PHP_EOL .
" <div class=\"qr-code-modal-content\">" . PHP_EOL . " <div class=\"qr-code-modal-content\">" . PHP_EOL .
" <span class=\"qr-code-modal-close\">&times;</span>" . PHP_EOL . " <span class=\"qr-code-modal-close\" onclick=\"hideQRModal('" . $id . "')\">&times;</span>" . PHP_EOL .
" " . $img_elem . PHP_EOL . " " . $img_elem . PHP_EOL .
" </div>" . PHP_EOL . " </div>" . PHP_EOL .
"</div>" . PHP_EOL; "</div>" . PHP_EOL;

6
output/script.js
Unescape Escape View File

@ -11,6 +11,12 @@ function displayQRModal(communityID) {
modal.style.display = "block"; modal.style.display = "block";
} }
function hideQRModal(communityID) {
var modalID = "modal_" + communityID;
modal = document.getElementById(modalID);
modal.style.display = "none";
}
function createJoinLinkButtons() { function createJoinLinkButtons() {
elements = document.getElementsByClassName("td_join_url"); elements = document.getElementsByClassName("td_join_url");
Array.from(elements).forEach((td_element) => { Array.from(elements).forEach((td_element) => {

18
output/styles.css
Unescape Escape View File

@ -47,15 +47,31 @@ body { background-color: var(--session-classic-da
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */ z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
padding-top: 100px; /* Location of the box */
/*overflow: auto;*/ /* Enable scroll if needed */
/*background-color: rgb(0,0,0);*/ /* Fallback color */
/*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
} }
.qr-code-modal-content { .qr-code-modal-content {
background-color: #ffffff;
border: 1px solid #000000;
width:80%;
margin: auto;
padding: 20px;
} }
.qr-code-modal-close { .qr-code-modal-close {
float: right; float: right;
font-size: 28px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: #aaaaaa;
} }
.qr-code-modal-close:hover, .qr-code-modal-close:hover,
.qr-code-modal-close:focus { .qr-code-modal-close:focus {
cursor: pointer; cursor: pointer;
text-decoration: none;
color: #000000;
} }