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
pagina2.html
perché questo non funziona come si fosse una singola pagina?
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>
