In my current project, I am working with Bootstrap 4 and I have a specific requirement to implement a modal. The modal should function in the following way:
- Upon clicking a button on the first .html page, I want to be redirected to a second .html page where a modal will open as a welcoming message.
Essentially, the modal serves as a popup box with a welcoming message.
Just to clarify, the button code is located in the first .html file, while the modal code is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Sign Up</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Welcome!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Welcome to the digital construction worksheet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
I have attempted various solutions, such as using id's and JavaScript, but have not been successful so far.