Hello,
I have created a nice register page using bootstrap cards each containing a more info button. Clicking the button opens a modal showing more details. My problem is that when the modal is opened, the background page scrolls back to the top. This means that when closing the modal, the user then has to scroll back to where they were to continue.
Is there an option in Wappler to prevent the page from going back to the top when opening a modal?
Cheers,
Brian
Could you please post the code of the button triggering the modal and the actual modal so we can take a look?
Are you sure you are not using a link with a href="#" to open the modal?
Thank you both for your comments.
I am using the following to open the modal.
<a href="#" class="btn btn-primary" dmx-on:click="modal1.show();modal1.data_detail1.select(id)">Learn more</a>
The modal itself is below.
<div class="modal fade hidden" id="modal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header bg-primary text-light">
<h5 class="modal-title">{{data_detail1.data.organisation}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container" is="dmx-data-detail" id="data_detail1" dmx-bind:data="api_togaf.data.atcRegister" key="id">
<p>{{data_detail1.data.about}}</p>
<div class="row">
<div class="col">
<div class="table-responsive">
<table class="table table-striped table-sm">
<tbody>
<tr>
<th scope="row">Certification Program</th>
<td>TOGAF® Certification Portfolio</td>
</tr>
<tr>
<th scope="row">Course Name</th>
<td>{{data_detail1.data.courseName}}</td>
</tr>
<tr>
<th scope="row">Course Version</th>
<td>The TOGAF® Standard, 10th Edition</td>
</tr>
<tr>
<th scope="row">Course Types</th>
<td>
<p dmx-html="{{data_detail1.data.courseTypes.replace(',', '<br>')}}" </p>
</td>
</tr>
<tr>
<th scope="row">Delivery method(s)</th>
<td>{{data_detail1.data.deliveryMethods.split(',')}}</td>
</tr>
<tr>
<th scope="row">Registration status</th>
<td>{{data_detail1.data.status}}</td>
</tr>
<tr>
<th scope="row">First Accredited</th>
<td>{{data_detail1.data.firstAccredited}}</td>
</tr>
<tr>
<th scope="row">Re-Accreditation Date</th>
<td>{{data_detail1.data.reAccDate}}</td>
</tr>
<tr>
<th scope="row">Conformance Statement</th>
<td><a href="" dmx-bind:href="data_detail1.data.conformanceDeclaration"><i class="far fa-file-pdf fa-3x"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="" dmx-bind:href="data_detail1.data.webSite" class="btn btn-primary" id="website">Visit {{data_detail1.data.organisation}}</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
Thank you.
Kind regards,
Brian
Well that is the issue href="#" - this makes your page scroll up.
Either change the link to a <button> or change its href to href="javascript:void(0)", but if it’s no a real link, i.e. it doesn’t point to a specific page/url then semantically it’s better to just change it to a button:
<button type="button" class="btn btn-primary" dmx-on:click="modal1.show();modal1.data_detail1.select(id)">Learn more</button>
Thank you so much Teodor. That works like a charm!