Bootstrap Modal openen met url

Status
Niet open voor verdere reacties.

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Beste mensen,

Op een van mijn pagina's op mijn website maak ik gebruik van een modal. Deze modal verschijnt wanneer men op een simpele knop drukt binnen deze pagina.

Echter wil ik ook graag naar deze pagina verwijzen vanaf een andere pagina (simpele hyperlink) waarin de modal ook al open staat.

Stukje code van de modal
Code:
<div class="modal fade" id="invoeren" tabindex="-1" role="dialog" aria-labelledby="invoerenLabel" aria-hidden="true">

Onderin dezelfde pagina staat het volgende stukje javascript
Code:
<script>
$(document).ready(function() {

  if(window.location.href.indexOf('#invoeren') != -1) {
    $('#invoeren').modal('show');
  }

});
</script>

Vanuit een andere pagina probeer ik nu de linken naar deze pagina met geopende modal
link is dan https://websitex.nl/pagina.php#invoeren

Toch opent de modal niet bij het laden van de pagina. Wat gaat er hier mis?
Alvast bedankt!
 
Het script kan je zo laten en de linkjes zien er dan zo uit.
Code:
<p><a href="javascript:void(0)" class="btn" data-toggle="modal" data-target="#invoeren">
Open modal op deze pagina
</a></p>

<p><a href="index.php#invoeren" class="btn">
Open modal vanaf andere pagina
</a></p>
:thumb: voor het gebruik van BS.

Noot: .indexOf() is hoofdlettergevoelig, gebruik er ook .toLowerCase() bij.
 
Laatst bewerkt:
Hoi Bron,
Dank je wel voor je antwoord nog zo laat.
Ik zie het verschil helaas niet met mijn link die ik geef. Uit je bericht versta ik dat de javascript code correct is.

Op een knop drukken met
Code:
<p><a href="voorbeeldpagina.php#invoeren" class="btn">
Open modal vanaf andere pagina
</a></p>
leidt mij naar de pagina https://www.mijnwebsite.nl/voorbeeldpagina.php#invoeren maar de modal is hierbij niet geopend. Op de voorbeeldpagina zelf open ik de modal zonder javascript:void maar met
Code:
<button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#invoeren">
maar dat terzijde.

Gaat denk ik toch iets fout op de pagina met de modal lijkt mij?
 
Ah, ik zie het probleem. Het lukt mij ook niet met een direct linkje, dit heeft mogelijk te maken met bubbling of caching.
Met een cookie (als je dat wilt gebruiken) kan het wel.
Code:
[B]html[/B]

<p><a href="javascript:void(0)" class="btn" data-toggle="modal" data-target="#invoeren">
Open modal op deze pagina
</a></p>
<p><a href="index.php" class="btn" id="tomodal">
Open modal vanaf andere pagina
</a></p>
<div class="modal fade" id="invoeren" tabindex="-1" role="dialog" aria-labelledby="invoerenLabel" aria-hidden="true">

[B]Javascript[/B]

function setCookie(key, value) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}
$(document).ready(function() {
    // show modal
    var cValue = getCookie('invoeren');
    if (!cValue) cValue = 'HideModal';
    if (cValue == 'ShowModal') $('#invoeren').modal('show');
    setCookie('invoeren', 'HideModal');
    // linkje on click
    $('#tomodal').on('click', function() {
        setCookie('invoeren', 'ShowModal');
        window.location.href = $(this).attr('href');
        return false;
    });
});
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan