A modal HTML content
html content type is default modal content type. If you do not specify a content type, the modal will always treat this content as html, and will try to render it as such.As a demo, let's display your site's terms and conditions. The term is just a dummy contributed by ChatGPT
ModalManager.instance.addModal({
body : {
content : `
<h1>Terms and Conditions</h1>
<p><strong>Last Updated:</strong> [Insert Date]</p>
<p>Welcome to <strong>[Your Company Name]</strong> ("Company", "we", "our", "us"). By accessing or using our website <strong>[yourwebsite.com]</strong> (the "Site") and any services provided (the "Services"), you agree to be bound by these Terms and Conditions ("Terms"). If you do not agree to these Terms, please do not use our Site or Services.</p>
<h2>1. Use of the Site and Services</h2>
<ul>
<li>You must be at least 18 years old to use our Services.</li>
<li>You agree to use the Site and Services for lawful purposes only.</li>
<li>Unauthorized use of our Site may result in termination of access.</li>
</ul>
<h2>2. Account Registration</h2>
<ul>
<li>You may be required to create an account to access certain features.</li>
<li>You are responsible for maintaining the confidentiality of your account credentials.</li>
<li>We reserve the right to suspend or terminate your account if any fraudulent or abusive activity is detected.</li>
</ul>
<h2>3. Intellectual Property</h2>
<p>All content on the Site, including text, graphics, logos, and software, is owned by or licensed to <strong>[Your Company Name]</strong> and protected by copyright and trademark laws. You may not reproduce, distribute, or modify any content without prior written permission.</p>
<h2>4. Payments and Refunds</h2>
<p>If our Services include paid features, you agree to pay the specified fees. Refunds may be granted at our sole discretion based on our refund policy.</p>
<h2>5. Limitation of Liability</h2>
<p>We are not responsible for any indirect, incidental, or consequential damages resulting from your use of the Site or Services. Our total liability under these Terms shall not exceed the amount paid by you for the Services.</p>
<h2>6. Termination</h2>
<p>We reserve the right to terminate or suspend your access to the Site and Services at any time, without prior notice, for violations of these Terms.</p>
<h2>7. Changes to These Terms</h2>
<p>We may update these Terms at any time. The latest version will always be available on this page. Your continued use of the Site and Services after changes are made constitutes your acceptance of the new Terms.</p>
<h2>8. Governing Law</h2>
<p>These Terms shall be governed by and construed in accordance with the laws of <strong>[Your Country/State]</strong>. Any disputes arising from these Terms shall be subject to the exclusive jurisdiction of the courts in <strong>[Your Country/State]</strong>.</p>
<h2>9. Contact Information</h2>
<p>If you have any questions about these Terms, please contact us at <strong>[Your Contact Email]</strong>.</p>
`
}
});
Please note: The modal body uses fex with direction set to column. So that it can render content vertically with some nice spacing. So, if you put text content along with html content inside tags, like span, paragraph, div, form, etc. The flex system will try to render them all vertically thinking they content has multiple blocks.
This is fine for most cases, but inline content like span can render as separate blocks, and this will certainly be breaking your intended design. So, simply wrap your html content inside a div element.
See what happens when the notes modal opens? It renders "Please note:" and "most cases" in separate
block vertically, while you just want them to be inline