Salve ragazzi.
Sono nuovo e sto lavorando su una galleria con livelli di profondità.
Per questo motivo ho bisogno di fare una chiamata a una pagina esterna con AJAX.
Fin qui tutto bene, ma non riesco a capire perchè non posso chiamare a una finestra modale solo con CSS così:
pagina1.html
pagina2.htmlcodice:<!DOCTYPE HTML> <html lang=""> <head> <meta charset="UTF-8"> <title>modal</title> <style> .modal-open { cursor:pointer; text-decoration:underline; color:blue; } .modal-dialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); z-index: 99999; opacity:0; color: black; -webkit-transition: opacity 100ms ease-in; -moz-transition: opacity 100ms ease-in; transition: opacity 100ms ease-in; pointer-events: none; } .modal-dialog.show { opacity:1; pointer-events: auto; } .modal-dialog div { width: 230px; position: relative; margin: 10% auto; padding: 16px 20px 21px 20px; border-radius: 4px; background: #fff; border: 2px white solid; } .close { background: black; color: white; line-height: 24px; position: absolute; right: -12px; text-align: center; top: -10px; width: 26px; text-decoration: none; font-weight: bold; border: 1px solid #666; border-radius: 12px; box-shadow: 1px 1px 3px #000; } </style> </head> <body> Click <a id="click-me" class="modal-open" href="page2.html">here</a> to know more. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $("#click-me").click(function (event) { const url = this.href; event.preventDefault(); $.ajax({ type: 'POST', url, data, success: function (data) { console.log(data); $('#info-modal').addClass("show"); }, async: true }); return false; }); $(".modal-dialog .close").click(function(){ $(this).closest(".modal-dialog").removeClass("show"); }); </script> </body> </html>
nello stesso modo come si farebbe da una singola pagina:codice:<!DOCTYPE HTML> <html lang=""> <head> <meta charset="UTF-8"> <title>page2</title> </head> <body> <div id="info-modal" class="modal-dialog"> <div> <a href="#close" title="Close" class="close">x</a> <h2>Hello!</h2> <p>You can display any information you want here!</p> </div> </div> </body> </html>
Grazie per l'attenzione.codice:<!DOCTYPE HTML> <html lang=""> <head> <meta charset="UTF-8"> <title>modal</title> <!--the same style sheet--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> Click <a id="click-me" class="modal-open"> here </a> to know more. <div id="info-modal" class="modal-dialog"> <div> <a href="#close" title="Close" class="close">x</a> <h2>Hello!</h2> <p>You can display any information you want here!</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $("#click-me").click(function () { $.ajax({ success: function (data) { console.log(data); $('#info-modal').addClass("show"); }, async: true }); }); $(".modal-dialog .close").click(function(){ $(this).closest(".modal-dialog").removeClass("show"); }); </script> </body> </html>
Rispondi quotando
