Modal Display Issue

[leemchildress]

I am trying to create a modal dynamically. My code generates the following HTML. However, when I click the button, the modal appears but grayed out as if disabled and the page locks up. Can you tell me where I failed?

<section class="page-header page-header-sm" style="background-color: #36454F">
				<div class="container">
					<div class="row">
						<div class="col-md-12 order-2 order-md-1 align-self-center p-static">
							<h1>
							    <i style="padding-right: 10px;" class="fa-solid fa-calendar-days"></i>
							    Building Closure: Martin Luther King Jr. Day</h1>
                                                            <p style="display: inline; color: #ffffff;">All Porter County Offices And Courts Will Be Closed On Monday, January 15, 2024, In Observance Of Martin Luther King Jr. Day.


                                                            <a href=""#""><span style="padding-left: 8px; text-decoration: none;" class="text-3 text-color-dark">Read More ...</span></a>

						</div>
					</div>
				</div>
			</section>
            <div class="modal fade" id="alert2130" tabindex="-1" role="dialog" aria-labelledby="alert2130Label" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="alert2130Label"></h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">
                            This is the actual detailed message.


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

---

• This topic was modified 7 months, 4 weeks ago by Support.

[Support]

Hello, the modal HTML must be added before the BODY tag close, can’t be anywhere in the code, please try to add at the bottom of the content and try again.

Kind Regards.

---

[leemchildress]

Tried moving to bottom and same result. I’m confused because in your example the modal follows immediately after the link, as shown below:

									<button class="btn btn-modern btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
										Launch Large Modal
									</button>

									<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
										<div class="modal-dialog modal-lg">
											<div class="modal-content">
												<div class="modal-header">
													<h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
													<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
												</div>
												<div class="modal-body">
													<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
													<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
												</div>
											</div>
										</div>
									</div>

---

[Support]

Hi, sure, we recommend adding at the bottom to avoid conflict with any other content.

With the following code in the default HTML file – page-full-width.html – this is the result:

<button class="btn btn-modern btn-primary" data-bs-toggle="modal" data-bs-target="#alert2130">
	Launch Large Modal
</button>

<div class="modal fade" id="alert2130" tabindex="-1" role="dialog" aria-labelledby="alert2130Label" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="alert2130Label">Title</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button>
			</div>
			<div class="modal-body">
				This is the actual detailed message.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

Please send me the URL of your site so we can check.

---

• This reply was modified 7 months, 4 weeks ago by Support.

[leemchildress]

I was able to resolve the issue. I had placed the modal just ABOVE the /body tag. Once I placed it immediately BELOW the /body tag it began working. Thank you so much for your assistance!

---

[Author]

Posts