If you want to create modal popups, alerts or confirmations without code, consider using the AlertConfirm, Gateway, FancyViewer, TopBox or VerifyStack elements instead.
Examples
Dragging and dropping a Modally stack into your webpage instantly gives you the following button and modal popup:
Without much effort, you can begin to see the CSS code used to style the modal popup. Therefore you can start to change aspects like its colour and sizing to suit your tastes:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in semper mi. Vestibulum et sem mollis, malesuada libero in, imperdiet velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam fringilla orci eu elit pharetra, eget tincidunt metus varius.
Sed nec augue nisi. Etiam a semper sem. Sed pulvinar auctor cursus. Curabitur mattis augue ligula, eu congue ante sodales at. Nunc imperdiet metus eget erat elementum, ac sagittis ante vestibulum.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum.
Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.
Setup
Modally works similar to other stacks, in that it is a stack element you install into Stacks / RapidWeaver. It becomes available for you, to drag and drop into your webpage from the Stacks Library.In RapidWeaver edit mode, you are presented with an HTML code box. This is where you edit the button to trigger your modal, plus the title bar, close button and content displayed within the modal popup.
Within the stacks side panel, you will see two boxes containing code. The first box contains your CSS code and the second box contains the Javascript code. Because these boxes are inherently small and lack syntax colouring, you would definitely benefit from pasting the code into a normal code editor (like Atom or VS Code) to view the code more clearly and make your edits. Then paste your completed code back into Modally.
Using multiple Modally stacks on the same page
It certainly is possible to use multiple Modally stacks on the same webpage and colour or style them differently. The easiest method is to 'scope' each modally stack, by means of appending a number on each instance of the word 'modally'...HTML:
<!-- A button to open the modal popup -->
<button onclick='openModally2()' class='btn btn-primary btn-lg'>Open The Modal</button>
<!-- The HTML markup and content for the window shade and modal popup -->
<div id='modally2_shade'></div>
<div id='modally2'>
<div id='modally2_title'>
<span>Important Message!</span>
<button id='modally2_close' onclick='closeModally2()'>✕</button>
</div>
<div id='modally2_content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in semper mi. Vestibulum et sem mollis, malesuada libero in, imperdiet velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam fringilla orci eu elit pharetra, eget tincidunt metus varius. Sed nec augue nisi. Etiam a semper sem. Sed pulvinar auctor cursus. Curabitur mattis augue ligula, eu congue ante sodales at. Nunc imperdiet metus eget erat elementum, ac sagittis ante vestibulum.
</div>
</div>CSS:
#modally2_shade {
display: none;
z-index: 998;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
}
#modally2 {
display: none;
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
width: min(100%, 33rem);
height: auto;
max-height: 100vh;
overflow: auto;
background: white;
transform: translate(-50%, -50%);
border-radius: 1rem;
box-shadow: 0 0 2rem 0.25rem rgba(0, 0, 0, 0.5);
}
.display_modally2 #modally2_shade,
.display_modally2 #modally2 {
display: block;
}
#modally2_title {
color: white;
background-color: #007bff;
padding: 0.75rem 1rem;
height: auto;
overflow: auto;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.5;
}
#modally2_close {
float: right;
font-size: 1.75rem;
background: none;
border: none;
outline: none;
color: white;
cursor: pointer;
padding: 0;
margin: 0;
line-height: 1;
}
#modally2_content {
padding: 1rem;
}
Javascript:
function openModally2() {
document.querySelector("body").classList.add("display_modally2");
}
function closeModally2() {
document.querySelector("body").classList.remove("display_modally2");
}