Ik heb een jquery scriptje gedownload waarmee een venster gepopupt wordt zodra de pagina geladen wordt.
Het script werkt perfect alleen het probleem is dat venster wordt popupt op elke pagina. Wat ik graag wil is dat het script alleen maar wordt uitgevoerd op 1 specifieke pagina.
Zelf kwam ik o.a. dit stukje script tegen:
.....echter het is na trial & error niet duidelijk hoe ik dit nou moet verwerken in de bestaande code. Ik hoop dat iemand mij kan helpen om het script in te stellen zodat het maar op 1 pagina geactiveerd wordt!
Dankjewel!
CSS:
Het script werkt perfect alleen het probleem is dat venster wordt popupt op elke pagina. Wat ik graag wil is dat het script alleen maar wordt uitgevoerd op 1 specifieke pagina.
Zelf kwam ik o.a. dit stukje script tegen:
Code:
$(function() {
$('#mypage').bind('pageshow', function() {
console.log($(this));
});
});.....echter het is na trial & error niet duidelijk hoe ik dit nou moet verwerken in de bestaande code. Ik hoop dat iemand mij kan helpen om het script in te stellen zodat het maar op 1 pagina geactiveerd wordt!
Dankjewel!
HTML:
<body>
<div class="maintext">
<h2> jQuery Popup Plugin Basic Demo</h2>
<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> <p class="popuptitel">Testbericht</p>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet, justo id fermentum fermentum, nisi purus vulputate enim, cursus sollicitudin arcu leo at nisl. In hac habitasse platea dictumst. Sed tristique, enim id molestie volutpat, tortor mauris aliquam metus, vitae volutpat sapien orci ac nulla. Nunc iaculis sapien eu mi egestas, vel interdum dolor ultricies. Sed dignissim non dolor ac rhoncus. Donec sed diam eget lectus dapibus vulputate. </p>
</div>
<a href="#" class="sluiten gaverder">Ga verder!</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.1;" id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="main.js"></script>
</body>
Code:
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.5);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .sluiten').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});CSS:
Code:
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
text-align: center;
}
#boxes #dialog {
height:auto;
background-color:#ffffff;
}
.maintext{
text-align: center;
font-family: "Segoe UI", sans-serif;
text-decoration: none;
}
.popuptitel {
font-family: "Segoe UI",sans-serif;
font-size: 12pt;
color:#a9a9a9;
font-weight:bold;
text-align: left;
margin-left: 30px;
}
#lorem {
font-family: "Segoe UI",sans-serif;
font-size: 12pt;
line-height: 1.5em;
letter-spacing: 0.05em;
color:#a9a9a9;
text-align: left;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 25px;
}
a.gaverder{
font-family: "Segoe UI",sans-serif;
font-size: 12pt;
letter-spacing: 0.05em;
color:#fff;
text-decoration:none;
float: right;
background-color:#397db5;
padding: 8px 8px 8px 8px;
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1s;
}
a.gaverder:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: #2d5c82;
}
