Is it possible to have an url like this:
www.url/#imprint
(or similar) to link directly to the page with the opened modal window?
is this possible? Any hints?
Thank you!
Is it possible to have an url like this:
www.url./#imprint
(or similar) to link directly to the page with the opened modal window?
is this possible? Any hints?
Thank you!
- Yes it is possible. But it depends on why and how you want to use link. – Khamidulla Commented Dec 18, 2013 at 15:47
- I just got a single prepage for some weeks and I need to link directly to my imprint from other services. But my Imprint is in a modal window on the prepage. That's why ;) – Marek123 Commented Dec 18, 2013 at 16:01
4 Answers
Reset to default 6You might be able to do something like this.
if (window.location.hash == "#imprint") {
$('#myModal').modal('show');
}
Just for future visitors/readers, I have created a very simple function to open a modal dynamically without the need to know the exact ID that you're looking for. It just falls through if no hash is located.
/**
* Function to open a bootstrap modal based on ID
* @param int
*/
function directLinkModal(hash) {
$(hash).modal('show');
}
/**
* Call the function on window load
* @param hash of the window
*/
directLinkModal(window.location.hash);
Yes it is possible. Just check URL:
function popModal() {
// code to pop up modal dialog
}
var hash = window.location.hash;
if (hash.substring(1) == 'modal1') {
popModal();
}
After losing couple of hours I came up with this one. A solution for opening different modals at page-2 based on the link that is clicked at page-1. The HTML code is based on Bootstrap official Modal examples.
HTML | page-1.html
<body>
<a href="http://yourwebsi.te/page-2.html?showmodal=1">
<a href="http://yourwebsi.te/page-2.html?showmodal=2">
</body>
JS | ShowModal.js
$(document).ready(function() {
var url = window.location.href;
if (url.indexOf('?showmodal=1') != -1) {
$("#modal-1").modal('show');
}
if (url.indexOf('?showmodal=2') != -1) {
$("#modal-2").modal('show');
}
});
HTML | page-2.html
<body>
<div class="modal fade bd-example-modal-lg" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">Your content</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">Your content</div>
</div>
</div>
<script src="ShowModal.js"></script>
</body>