Modal
Modals are dialogs which can be used for forms, notifications, lightboxes, and other custom content. Modals in Halfmoon require no JavaScript. However, they can be used with JavaScript as well.
It was going to rain. The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare.
It had been her dream for years but Dana had failed to take any action toward making it come true. There had always been a good excuse to delay or prioritize another project. As she woke, she realized she was once again at a crossroads. Would it be another excuse or would she finally find the courage to pursue her dream? Dana rose and took her first step.
I'm meant to be writing at this moment. What I mean is, I'm meant to be writing something else at this moment. The document I'm meant to be writing is, of course, open in another program on my computer and is patiently awaiting my attention. Yet here I am plonking down senseless sentiments in this paragraph because it's easier to do than to work on anything particularly meaningful. I am grateful for the distraction.
Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
They rushed out the door, grabbing anything and everything they could think of they might need. There was no time to double-check to make sure they weren't leaving something important behind. Everything was thrown into the car and they sped off. Thirty minutes later they were safe and that was when it dawned on them that they had forgotten the most important thing of all.
Dave watched as the forest burned up on the hill, only a few miles from her house. The car had been hastily packed and Marta was inside trying to round up the last of the pets. Dave went through his mental list of the most important papers and documents that they couldn't leave behind. He scolded himself for not having prepared these better in advance and hoped that he had remembered everything that was needed. He continued to wait for Marta to appear with the pets, but she still was nowhere to be seen.
"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Modals are dialogs which can be used for forms, notifications, lightboxes, and other custom content. Modals in Halfmoon require no JavaScript. However, they can be used with JavaScript as well.
Click on the following button to open a demo modal.
Open modal<!-- First comes the modal -->
<div class="modal" id="modal-1" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Modal title</h5>
<p>
This is the modal content. Almost any type of content can be presented to the user here.
</p>
<div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
<a href="#" class="btn mr-5" role="button">Close</a>
<a href="#" class="btn btn-primary" role="button">I understand</a>
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-1" class="btn btn-primary" role="button">Open modal</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>Here's a list of things to understand about modals in Halfmoon.
Forms can also be used inside modal dialog boxes. The next example shows one such modal.
Click on the following button to see a modal with a form.
Sign in<!-- First comes the modal -->
<div class="modal" id="modal-2" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="btn close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Sign in to your account</h5>
<form action="..." method="...">
<div class="form-group">
<label for="username" class="required">Username</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<label for="password" class="required">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" required="required">
</div>
<input class="btn btn-primary btn-block" type="submit" value="Sign in">
</form>
<div class="text-right mt-10"> <!-- text-right = text-align: right, margin-top: 1rem (10px) -->
<a href="#modal-2" class="hyperlink">Forgot password?</a> <!-- hyperlink = used on regular links to remove anti-aliasing in dark mode -->
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-2" class="btn btn-primary" role="button">Sign in</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>The next example shows a modal with a lot of content, which makes it scrollable.
Click on the following button to see a modal that can be scrolled.
Long and scrollable content<!-- Long scrollable content in the modal -->
<div class="modal ie-scroll-fix" id="modal-3" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content w-600"> <!-- w-600 = width: 60rem (600px) -->
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<!-- Long scrollable content here -->
...
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-3" class="btn" role="button">Long and scrollable content</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>Images and videos can also be placed inside modals. The following example is an image magnifier. Note the .modal-content-media class, which removes the card like styling, so it can be used effectively to display media.
Click the image to enlarge
<!-- Modal containing the image -->
<div class="modal" id="modal-4" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-media w-500"> <!-- w-500 = width: 50rem (500px) -->
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<img src="..." class="img-fluid" alt="modal-img">
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-4">
<img src="..." class="img-fluid rounded" width="100" alt="modal-img-thumbnail">
</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>Full-screen modals can be created by adding the class .modal-full to the modal. The card placed inside it will automatically be formatted to be a page on top of the main page.
Click on the following button to open an article in a full screen modal.
Full-screen modal<!-- Full-screen modal -->
<div class="modal modal-full ie-scroll-fix" id="modal-5" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<!-- Article here -->
...
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-5" class="btn btn-primary" role="button">Full-screen modal</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>All the modals showcased above can also be used with JavaScript, instead of using the :target selector. Using JavaScript, modals are toggled in the following ways:
Modals can be dismissed using JavaScript by clicking on an element with the attribute data-dismiss="modal". Therefore, this attribute is used on the close buttons in the following example. They can also be dismissed by calling the halfmoon.toggleModal(modalId) again (with the modal open).
The following buttons can be used to toggle the same modal using JavaScript. The first one uses the attribute, the second one uses the built-in method.
<!-- JavaScript based modal -->
<div class="modal" id="modal-6" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button class="close" data-dismiss="modal" type="button" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Modal title</h5>
<p>
This is the modal content. Almost any type of content can be presented to the user here.
</p>
<div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
<button class="btn mr-5" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-primary" data-dismiss="modal" type="button">I understand</button>
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggles inside the content wrapper -->
<div class="content-wrapper">
...
<button class="btn" data-toggle="modal" data-target="modal-6">Using attribute</button>
<button class="btn btn-primary" onclick="halfmoon.toggleModal('modal-6')">Using method</button>
...
</div>
</div>
<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>As mentioned above, modals can also be closed by clicking on the overlay, or pressing the esc key. However, these dismissal methods can be disabled using the following attributes:
This can be useful for modals that display content requiring urgent attention from the user.
Click on the following button to see a modal that can only be dismissed by clicking on one of the close buttons.
Open modal<!-- Modal that can not be closed by clicking on the overlay, or pressing the [esc] key -->
<div class="modal" id="modal-7" tabindex="-1" role="dialog" data-overlay-dismissal-disabled="true" data-esc-dismissal-disabled="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Modal title</h5>
<p>
This modal can not be closed by clicking on the overlay, or pressing the <kbd>esc</kbd> key.
</p>
<div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
<a href="#" class="btn mr-5" role="button">Close</a>
<a href="#" class="btn btn-primary" role="button">I understand</a>
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper">
<!-- Modal toggle inside the content wrapper -->
<div class="content-wrapper">
...
<a href="#modal-7" class="btn btn-primary" role="button">Open modal</a>
...
</div>
</div>
<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<!-- However, the dismissal methods have been disabled by the attributes on the modal here. -->
<script src="path/to/halfmoon.js"></script>Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .
