Basic functionality: Popup Dialogue window
This commit is contained in:
parent
8c00e67310
commit
30f184c686
4 changed files with 300 additions and 103 deletions
86
motorradig/public/css/custom.css
vendored
86
motorradig/public/css/custom.css
vendored
|
|
@ -72,64 +72,40 @@ p {
|
|||
/*******************
|
||||
Modal styles
|
||||
********************/
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: 200ms ease-in-out;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
width: 500px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.modal-header .title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-header .close-button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
transition: 200ms ease-in-out;
|
||||
top: 0;
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
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 */
|
||||
}
|
||||
|
||||
#overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
/* Modal Content/Box */
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto; /* 15% from the top and centered */
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%; /* Could be more or less, depending on screen size */
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,24 +82,21 @@
|
|||
|
||||
</form>
|
||||
<!-- Modal Test start -->
|
||||
<button data-modal-target="#modal" onclick="alert('test');">Open Modal</button>
|
||||
<div class="modal" id="modal">
|
||||
<div class="modal-header">
|
||||
<div class="title">Example Modal</div>
|
||||
<button data-close-button class="close-button">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias
|
||||
ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis
|
||||
quae quia soluta totam doloribus quos nesciunt necessitatibus,
|
||||
consectetur quisquam accusamus ex, dolorum, dicta vel? Nostrum
|
||||
voluptatem totam, molestiae rem at ad autem dolor ex aperiam. Amet
|
||||
assumenda eos architecto, dolor placeat deserunt voluptatibus tenetur
|
||||
sint officiis perferendis atque! Voluptatem maxime eius eum dolorem
|
||||
dolor exercitationem quis iusto totam! Repudiandae nobis nesciunt sequi
|
||||
iure! Eligendi, eius libero. Ex, repellat sapiente!
|
||||
|
||||
<!-- Trigger/Open The Modal -->
|
||||
<button id="myBtn">Open Modal</button>
|
||||
|
||||
<!-- The Modal -->
|
||||
<div id="myModal" class="modal">
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<p>Some text in the Modal..</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Modal Test end -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,4 +138,33 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Get the modal
|
||||
var modal = document.getElementById("myModal");
|
||||
|
||||
// Get the button that opens the modal
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
// Get the <span> element that closes the modal
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
// When the user clicks on the button, open the modal
|
||||
btn.onclick = function() {
|
||||
console.log("Clicked Open Modal")
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// When the user clicks on <span> (x), close the modal
|
||||
span.onclick = function() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// When the user clicks anywhere outside of the modal, close it
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -94,34 +94,4 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Button trigger modal demo
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Teilnehmer entfernen</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Sind sie sicher ??
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" data-dismiss="modal">Abbrechen</button>
|
||||
<button type="button" onclick="alert('LÖSCHEN'); return false;" data-dismiss="modal" class="btn btn-danger">Löschen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
@endsection
|
||||
|
|
|
|||
225
tools/motorradig_2022-06-12_100155.sql
Normal file
225
tools/motorradig_2022-06-12_100155.sql
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue