come creare un popup con CSS da una pagina esterna?

master41

Nuovo Utente
4 Gen 2017
1
0
1
48
Potreste aiutarmi con il seguente problema?
Ho bisogno di aprire il contenuto da una pagina esterna come popup solo con CSS, senza plugin.
pagina1.html
HTML:
<!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>

pagina2.html
HTML:
<!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>

perché questo non funziona come si fosse una singola pagina?
HTML:
<!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"> 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>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Ciao
Questo non è un problema css ma jquery quindi ti sposto nella sezione jquery.
Nella pagina1 c'è anche errori di sintassi nello script
 
Discussioni simili
Autore Titolo Forum Risposte Data
B Creare popup con dreamweaver HTML e CSS 3
S devo creare un popup con metodo post HTML e CSS 0
M creare form in un popup HTML e CSS 1
A creare una popup Javascript 11
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1
I Creare Qsl radioamatore con testo editabile Presentati al Forum 1
T [PHP] Creare Honeypot per form contatti PHP 10

Discussioni simili