Utiliser le lien html pour ouvrir le javascript modal

Je veux ouvrir un modal chaque fois que je clique sur un lien HTML. Dans ma barre de navigation, j'ai un lien appelé "règles" où toutes les règles du site sont écrites. Chaque fois que quelqu'un clique sur le lien, je veux qu'il ouvre un modal javascript. Avec de faibles connaissances en JavaScript, je ne suis pas capable de créer quelque chose d'aussi simple que cela sans problèmes.Utiliser le lien html pour ouvrir le javascript modal

Heres le script modal et HTML:

<div class="modal-background"> 
<form action="/etc/set_cookie.php" method="post"> 
    <div id="modal"> 
    <div class="modalconent tabs"> 
     <fieldset> 
     <span class="close">×</span> 
      <h2 class="fs-title">Cookies</h2> 
      <h3 class="fs-subtitle">We use cookies to improve your experience</h3> 
      <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php" ></iframe><br /> 
      <input type="submit" name="cookie" value="Accept" id="button" class="btn fr" style="width:180px; padding:10px;" /> 
     </fieldset> 
    </div> 
    </div> 
</form> 
</div> 


<script> 
window.onload = function() { 
    document.getElementById('button').onclick = function() { 
     document.getElementById('modal').style.display = "none" 
    }; 
}; 

$(".modal-background, .modal-close").on("click", function(){ 
    $(".modal-container, .modal-background").hide(); 
}); 


// Get the modal 
var modal = document.getElementById('modal'); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script>

Ce que je veux est d'avoir l'appel de lien ouvrir le script qui se trouvent dans un autre dossier, chaque fois que sa enfoncée. Tout ce que j'ai vu en ligne est des boutons avec cette fonction mais comme je ne suis pas bon avec javascript, je ne suis pas capable de le réécrire pour fonctionner avec mon script modal.

Source

2016-10-21 martin j

Je remarquai que je partageais un mauvais code html, mais le tout est pareil sans que ce soit celui que j'utilise pour les cookies –

Pour infotmation générale Modal vous obtenir auprès http://www.w3schools.com/howto/howto_css_modals.asp

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}

Toutefois, si vous utilisez Jquery (et à partir de votre code que vous), vous avez quelque chose plus facile à faire: maintenant ce que vous pouvez faire est assign une pièce d'identité à votre lien et faire ceci:

$("#YourIDHereLink").on("click", function() 
    { 
     $("#Modal").css("display", "block"); 
}

Où si vous voulez cacher remplacer le bloc avec « none »

Gen En fait, je recommande la 2ème approche

Source

2016-10-21 08:54:03

même problème que la réponse ci-dessus, la charge modale tout de suite et les fonctions pour masquer le modal ne fonctionnent pas –

avez-vous essayé le code ci-dessous? Essayez de le remplacer par "none" au lieu de "block" –

Pour appeler une fonction javascript en utilisant un lien, faites simplement comme ceci:

<a href="javascript:yourfunction();">Link to Javascript function</a>

Assurez-vous que le fichier de votre fonction javascript est, est liée à la tête du html.

Source

2016-10-21 08:49:42 jogoe

Alors je donne juste au script une fonction 'function yourfunction() {le reste du code}'? –

J'ai essayé de le faire maintenant, mais il semble que la charge modale à l'actualisation et aucune des méthodes de fermeture n'a fonctionné –

pourriez-vous faire une jsfiddle de votre problème? rendrait les choses beaucoup plus faciles. – jogoe

ModaliseJS, peut faire l'affaire. HTML: Je viens d'ajouter une classe "confirm" et quelques JS.

ModaliseJS fermeront le modal lorsque vous cliquez sur un élément dans le modal avec les classes .close, .confirm, .cancel, les événements de tir onShow, onHide, onCancel

<!DOCTYPE html> 

<html> 

<head> 
    <title>Modal example</title> 
    <script src="js/modalise.js" type="text/javascript"> 
    </script> 
    <script src="app.js" type="text/javascript"> 
    </script> 
</head> 

<body> 
    <h1>Example modal 1</h1> 
    <button id="openModal">Show the modal</button> 
    <div class="modal-background"> 
    <form action="/etc/set_cookie.php" method="post"> 
     <div id="modal"> 
     <div class="modalconent tabs"> 
      <fieldset> 
      <span class="close">×</span> 
      <h2 class="fs-title">Cookies</h2> 
      <h3 class="fs-subtitle">We use cookies to improve your experience</h3> 
      <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php"></iframe> 
      <br /> 
      <input type="submit" name="cookie" value="Accept" id="button" class="btn fr confirm" style="width:180px; padding:10px;" /> 
      </fieldset> 
     </div> 
     </div> 
    </form> 
    </div> 
    <script> 
    var myModal = {} 

    window.onload = function() { 
     // It is one of the button Modalise will attach the Show event. 
     // Note that you can use Modalise without the events, by omitting the .attach() function. 
     // Then, you can use show() or hide() to use it manually without overload. 
     var btnOpen = document.getElementById('openModal'); 

     // Modalise(id, options); 
     myModal = new Modalise('exampleModal', { 
      btnsOpen: [btnOpen] 
     }) 
     .attach() 
     .on('onShow', console.log) 
     .on('onConfirm', console.log) 
     .on('onHide', console.log); 

    } 
    </script> 
</body> 

</html>

Source

2016-10-28 08:22:05

Utiliser le lien html pour ouvrir le javascript modal

Répondre

Questions connexes