Modal Closing with Inside Click and Staying on Page Options

[smellycat17]

Hi All!

I'm having some issues with my modal.

My modal has linked text in it. The text/links anchor down to move the user to specific parts of my page. I would like my modal to close when a link/copy is clicked in the modal. I didn't know if this was possible or not. I only know how to close a modal when there is a click outside of the modal box but I'm looking for the opposite.

Also, when copy/a link is clicked, the page anchors down, and I click the X or Close button for my modal, the page automatically moves to the top instead of staying anchored. Any ideas on how to keep the page anchored and not go back to the top when the modal is closed out?

Here is my current HTML:

CODE

<div class="col-xs-12 full visible-lg visible-md visible-sm" style="text-align: center;">
<p><b>To get started, choose if you got a phone or SIM card.</b></p>

<p><a class="btn btn-primary btn-lg button2" data-target="#modalPhone" data-toggle="modal" href="/#"><span class="modal-hyperlinks">Phone</span></a></p>
</div>

<div aria-hidden="true" aria-labelledby="Phone" class="modal fade" id="modalPhone" role="dialog" style="display: none;" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><small><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> </small>

<h4 class="modal-title" id="Phone Scenarios">I got a <b>phone</b>.</h4>
<small> </small></div>

<div class="modal-body">
<p style="text-align: left;">Next, choose which of the following scenarios best fits your phone activation:</p>

<p style="text-align: left;"><b><a href="#New Activation New Number">New Service With a New Number</a></b></p>

<p style="text-align: left;"><b><a href="#New Activation Port">New Service Keeping Your Current Number</a></b></p>

<p style="text-align: left;"><b><a href="#Replacement Phone Activated Suspended">Replacement Phone - Your Phone Was Lost, Stolen, or Damaged</a></b></p>

<p style="text-align: left;"><b><a href="#Replacement Phone Activated Not Suspended">Replacement Phone - Currently Using Another Phone</a></b></p>
</div>

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

Any help is appreciated.

Thank you in advance

This post has been edited by smellycat17: Mar 4 2021, 02:47 PM

[Christian J]

A modal requires javascript to work, so that's where you might close it as well.

Normally the page shouldn't scroll back up unless something is causing it. The closing button in the code example won't do anything by itself without javascript.

[smellycat17]

I see. Any idea on what javascript I should be adding? Sorry if that's asking for too much. I don't have much knowledge on javascript so I have no idea where to even start for this.