come creare un popup con CSS da una pagina esterna?

master41

Nuovo Utente
4 Gen 2017
1
0
1
45
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.296
331
83
Ciao
Questo non è un problema css ma jquery quindi ti sposto nella sezione jquery.
Nella pagina1 c'è anche errori di sintassi nello script