I haven’t tried anything because I don’t know where to start. I need to have an html button open a modal that will create a div with an expiration date (it will disappear on that date and time permanently), on the create button click (and the create button in the modal will also close the modal. Does anyone know how to do this?
I need one that opens the modal, and the second one will both add the new card with the expiration date and it will close the modal.
The card will be displayed below the add session button in the image (the blue button in the background behind the modal - the modal has been opened to show you what it looks like now- I just need the functionality - everything else is already there) without the modal, and then the modal is how you create/add a scheduled session (there is a data and time input in the modal), and then the create session button with the plus in the second image with the modal is how you add the card and close the modal. Everything will be created when you click the create session button in the modal. (It’s the blue button in the image with the modal (it has the title “Create Session” at the top)) There’s a start time and end time, the end time is what is actually going to make it disappear because on the specific date at the end time, the card will disappear.
<style>
#myBtn {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9; /* Sit on top */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding-top: 50px; /* Location of the box */
left: 0;
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 */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
border-top:6px solid #146ad9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 20px;
box-shadow:0 0 5px #111;
width: 40%;
}
/* The Close Button */
.close {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.startbutton {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.close:hover,
.close:focus {
border-radius:6px;
background-color:#146ad9;
color:white;
padding:10px 16px 10px 16px;
border:none;
cursor:pointer;
}
.session-label {
width:120px;
display:inline-block;
}
input[type="date"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
cursor:pointer;
margin-top:5px;
border-radius:8px;
}
input[type="time"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
cursor:pointer;
margin-top:5px;
border-radius:8px;
}
input[type="text"] {
outline:none;
padding:2px 4px 2px 4px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border:1px solid #ccc;
color:#777;
width:60%;
margin-top:5px;
border-radius:8px;
}
</style>
<!-- Trigger/Open The Modal -->
<button class="startbutton" id="myBtn" title="Schedule a session"><img src="https://deviceconsole.desinic8.repl.co/plus.png" style="width:16px; margin-bottom:-2.5px; margin-right:3px"> Add Session</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p style="font-size:1em; color:#333; margin-top:-6px; font-weight:600">Create Session</p>
<p style="color:#444; font-size:0.8em">Create a scheduled session that will automatically start, even if you're not logged in.</p>
<hr style="border: none; height: 2px; background: #fff">
<label class="session-label" style="color:#444; font-size:0.8em; margin-top:5px">New Session for:</label>
<input type="text" placeholder="Type class name as it appears in your class list">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">Session Date:</label>
<input type="date">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">Start Time:</label>
<input type="time">
<br>
<label class="session-label" style="color:#444; font-size:0.8em">End Time:</label>
<input type="time">
<br>
<button class="close" title="Schedule a session" style="margin-top:20px"><img src="https://deviceconsole.desinic8.repl.co/check (2).png" style="width:16px; margin-bottom:-2.5px; margin-right:3px"> Create session</button>
<br>
</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 the button, open the modal
btn.onclick = function() {
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>
This is a project that I’ve been trying to play around with for fun. I need to have the localstorage for the card creation and the expiration thing. I also need to have the class title (school class title) be able to be displayed in the card (I don’t know if I mentioned it or not.) Hopefully this code is enough information. If you need more, just let me know.
To answer your question about what it’s for, (in detail), it’s a test project for something I may or may not build to release. I’m just trying to get a prototype, so it doesn’t have to be studio quality because I can style it myself.
I posted the code above.
I posted the code. Can you help me or should I ask someone else? (Sorry, if that sounded rude)
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.