problema con finestra modale da pagina esterna (solo CSS)

**user35** · 04-01-2017, 23:33

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

codice:

<!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

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>

nello stesso modo come si farebbe da una singola pagina:

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>

Grazie per l'attenzione.

Discussione: problema con finestra modale da pagina esterna (solo CSS)

Strumenti discussione

Ricerca discussione

Visualizza

problema con finestra modale da pagina esterna (solo CSS)

Tag per questa discussione

Permessi di invio