Learn how to use the Modal component with the JSON Layout API
A simple modal rendered via JSON API with a title, message, and action buttons.
// V2 API - Semantic Content Types
const config = {
version: 2,
layoutId: "modal-demo-1",
breakpoints: { xs: 1 },
items: [
{
content: {
type: "button",
text: "Delete Item",
icon: "fa fa-trash",
onClick: () => openDemoModal1()
}
},
{
content: {
type: "modal",
id: "demo-modal-1",
title: "Confirm Deletion",
content: "Are you sure you want to delete this item? This action cannot be undone.",
buttons: [
{ text: "Cancel", variant: "secondary" },
{ text: "Delete", variant: "danger", onClick: () => alert('Deleted!') }
]
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);
// Function to open the modal
function openDemoModal1() {
RSL.Modal.showModal({
target: '#demo-modal-1',
animationIn: 'fadeIn'
});
}Programmatically inject content into a modal using the JSON API.
const config = {
version: 1,
layoutId: "modal-demo-2",
breakpoints: { xs: 1, md: 3 },
items: [
{
id: "product-1",
content: {
type: "html",
value: `
<div style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 8px;">
<h3>Product A</h3>
<p>High quality item</p>
<button class="btn" onclick="showProductDetails('Product A', 'High quality item with premium features', '$99.99')">
View Details
</button>
</div>
`
}
},
{
id: "product-2",
content: {
type: "html",
value: `
<div style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 8px;">
<h3>Product B</h3>
<p>Affordable option</p>
<button class="btn" onclick="showProductDetails('Product B', 'Budget-friendly with essential features', '$49.99')">
View Details
</button>
</div>
`
}
},
{
id: "product-3",
content: {
type: "html",
value: `
<div style="padding: 1rem; border: 1px solid #e0e0e0; border-radius: 8px;">
<h3>Product C</h3>
<p>Premium choice</p>
<button class="btn" onclick="showProductDetails('Product C', 'Top-of-the-line with all features', '$149.99')">
View Details
</button>
</div>
`
}
},
{
id: "product-modal",
content: {
type: "html",
value: `
<div class="modal-container" id="product-modal">
<div class="modal">
<div class="modal-header">
<h2 id="modalTitle">Product Details</h2>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn close-modal" data-animation-out="slideOutUp">Close</button>
</div>
</div>
</div>
`
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);
// Function to show product details
function showProductDetails(name, description, price) {
RSL.Modal.showModal({
target: '#product-modal',
title: '<h2>' + name + '</h2>',
body: [
'<p style="font-size: 1.1rem;">' + description + '</p>',
'<p style="font-size: 1.5rem; font-weight: bold; color: #6E7BFF;">' + price + '</p>',
'<button class="btn" style="width: 100%;">Add to Cart</button>'
],
animationIn: 'slideInDown'
});
}Create a modal containing a form for user input.
const config = {
version: 1,
layoutId: "modal-demo-3",
breakpoints: { xs: 1 },
items: [
{
id: "contact-btn",
content: {
type: "html",
value: `
<button class="btn" onclick="openContactModal()">
<i class="fa fa-envelope"></i> Contact Us
</button>
`
}
},
{
id: "contact-modal",
content: {
type: "html",
value: `
<div class="modal-container" id="contact-modal">
<div class="modal">
<div class="modal-header">
<h2 id="modalTitle">Send us a message</h2>
</div>
<div class="modal-body">
<form id="contact-form" style="display: flex; flex-direction: column; gap: 1rem;">
<div>
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Name:</label>
<input type="text" style="width: 100%; padding: 0.5rem; border: 1px solid #e0e0e0; border-radius: 4px;" required>
</div>
<div>
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Email:</label>
<input type="email" style="width: 100%; padding: 0.5rem; border: 1px solid #e0e0e0; border-radius: 4px;" required>
</div>
<div>
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Message:</label>
<textarea rows="4" style="width: 100%; padding: 0.5rem; border: 1px solid #e0e0e0; border-radius: 4px;" required></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary close-modal" data-animation-out="fadeOut">Cancel</button>
<button class="btn" onclick="submitContactForm()">Send Message</button>
</div>
</div>
</div>
`
}
}
]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);
function openContactModal() {
RSL.Modal.showModal({
target: '#contact-modal',
animationIn: 'bounceIn'
});
}
function submitContactForm() {
const form = document.getElementById('contact-form');
if (form.checkValidity()) {
alert('Message sent! (Demo only)');
document.querySelector('#contact-modal .close-modal').click();
} else {
form.reportValidity();
}
}Demonstrate multiple independent modals in one layout.
const config = {
version: 1,
layoutId: "modal-demo-4",
breakpoints: { xs: 1, md: 3 },
items: [
{
id: "info-btn",
content: {
type: "html",
value: `
<button class="btn" onclick="openInfoModal()">
<i class="fa fa-info-circle"></i> Info
</button>
`
}
},
{
id: "warning-btn",
content: {
type: "html",
value: `
<button class="btn" style="background: #f59e0b;" onclick="openWarningModal()">
<i class="fa fa-exclamation-triangle"></i> Warning
</button>
`
}
},
{
id: "success-btn",
content: {
type: "html",
value: `
<button class="btn" style="background: #10b981;" onclick="openSuccessModal()">
<i class="fa fa-check-circle"></i> Success
</button>
`
}
},
{
id: "info-modal",
content: {
type: "html",
value: `
<div class="modal-container" id="info-modal">
<div class="modal">
<div class="modal-header">
<h2 id="modalTitle"><i class="fa fa-info-circle"></i> Information</h2>
</div>
<div class="modal-body">
<p>This is an informational modal rendered via JSON API.</p>
</div>
<div class="modal-footer">
<button class="btn close-modal" data-animation-out="fadeOut">OK</button>
</div>
</div>
</div>
`
}
},
{
id: "warning-modal",
content: {
type: "html",
value: `
<div class="modal-container" id="warning-modal">
<div class="modal">
<div class="modal-header" style="background: #f59e0b; color: white;">
<h2 id="modalTitle"><i class="fa fa-exclamation-triangle"></i> Warning</h2>
</div>
<div class="modal-body">
<p>Please review your changes carefully before proceeding.</p>
</div>
<div class="modal-footer">
<button class="btn close-modal" data-animation-out="fadeOut">Understood</button>
</div>
</div>
</div>
`
}
},
{
id: "success-modal",
content: {
type: "html",
value: `
<div class="modal-container" id="success-modal">
<div class="modal">
<div class="modal-header" style="background: #10b981; color: white;">
<h2 id="modalTitle"><i class="fa fa-check-circle"></i> Success</h2>
</div>
<div class="modal-body">
<p>Your operation completed successfully!</p>
</div>
<div class="modal-footer">
<button class="btn close-modal" data-animation-out="bounceOut">Great!</button>
</div>
</div>
</div>
`
}
}
]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);
function openInfoModal() {
RSL.Modal.showModal({ target: '#info-modal', animationIn: 'fadeIn' });
}
function openWarningModal() {
RSL.Modal.showModal({ target: '#warning-modal', animationIn: 'shake' });
}
function openSuccessModal() {
RSL.Modal.showModal({ target: '#success-modal', animationIn: 'bounceIn' });
}