How to Reset the Modal Hash - UX Troubleshooting

Good afternoon! (Or whatever time your timezone is in.)

I’m working on a site currently, and I have a modal element included in one of the columns. It’s set so that the modal toggle is nixxed, and the modal itself is triggered from an anchor.

What Happens

When you click on the modal trigger text, the modal pops up. This is normal and exactly what I want. However, when you exit the modal the URL still contains the /#modal-hash thingy, effectively disabling the trigger text indefinitely unless the user clicks the “Logo” or “Home” buttons. Reloading the page (something that most users may try, should they ever need to re-click the text) does nothing, because it retains the hash.

What I WANT to Make Happen

Once the trigger text is clicked and the modal overlays everything, I want the modal background and “x” button to become one giant anchor that links to the parent page without the hash. Yes, the reload is a bit of a workaround, but it’s much more simple of a solution (I hope) than screwing with another layer of script.


If it’s possible to reset the anchor without this development, feel free to clue me in! However, I think that it’s technically a development bug or simply a limitation within the Cornerstone code development.

I do have a sneaking suspicion that you’re about to reply with a “this is custom code and outside of our support.” That’s fine, of course… but if you would be so kind as to direct me to where the modal overlay code file path is pointing within the theme or plugin files (ideally the HTML that generates .x-modal-content-outer) I can most likely take it from there.

Thank you for your time,

-Jake

Hello Jake,

Thanks for writing in!

You are having this issue because you are using a normal link to trigger the modal content area.

<div id="free-estimate" style="font-style:oblique;">Or <a href="#free-estimate-over" id="free-estimate-link" style="outline: none;">Get a Free Estimate…</a></div>

Links with a hash will always modify the address bar url adding the hash.

If you want to trigger the modal content without ever changing the address bar url, you can make use of the text version of the modal content toggle.

Setting the width:

Inserting the Text:

If you are wondering where the files that holds the Content Modal html, it can be found in Cornerstone plugin, cornerstone/includes/views/partials/modal.php. We do not encourage you to edit the file as it may create any conflicts or issues in your site. It is best that you create your own custom modal content area instead to avoid any conflicts. If you are not familiar in doing so, may we advised to get in contact with a 3rd party developer instead.

Hope this helps.

Thanks! I hadn’t explored Cornerstone’s modal capabilities enough to realize that there was a text-only toggle option. That solves my issue entirely without having to resort to custom development as a solution.

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

Note to anyone following that you must change your preferences to “Advanced Mode” in order to adjust the text toggle. I’m only mentioning this because the settings in Advanced Mode thing has come up a few times in other spots.

Hi,

Thanks for the info. Have a great day! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.