Boas, tenho um pequeno problema com um template. Fiz o download da seguinte template (http://sdrv.ms/18pQx9Q), que tenciono usar na minha PAP de informática. Quando tentei fazer em javascript uma pequena janela que aparecesse a frente ao clicar num botão, vi que não aparecia nada. Depois de remover o background, vi que a janela estava lá, o problema é que o background tapa a janela, ou seja está a frente dela. Queria por a janela a frente do background, como é obvio.
Segue aqui o código da página principal. Código (HTML):
Cumps.
Segue aqui o código da página principal. Código (HTML):
<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="ie ie9"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- Mobile Specific Metas
+++++++++++++++++++++++++++ -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favico.ico">
<link rel="apple-touch-icon" href="img/apple_icons_57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple_icons_72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple_icons_114x114.png">
<title>Frame - Top notch multipurpose HTML5 Theme.</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/theme_settings.css">
<link rel="stylesheet" type="text/css" href="css/skin.css">
<link rel="stylesheet" type="text/css" href="css/color_theme.css" id="theme_color">
<!--[if IE 8 ]>
<link rel="stylesheet" type="text/css" href="css/ie_css.css">
<script>
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fs_gllaery.css">
<script type="text/javascript" src="js/fs_gllaery.js"></script>
<script language="javascript">
function show_popup(id) {
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "";
}
}
}
function hide_popup(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}
}
}
</script>
</head>
<body class="fullscreen_layout">
<div id="my_popup" style="display:none;border:1px dotted gray;padding:.3em;background-color:white;position:absolute;width:200px;height:200px;left:100px;top:100px">
<div align="right">
<a href="javascript:hide_popup('my_popup')">close</a>
</div>
<h3>Vooler PopUp</h3>
<p>You contents go here, whatever style or anything</p>
</div>
<header class="">
<div class="header_wrapper container">
<a href="index.html" class="logo"><img src="img/logo.png" alt="" class="logo_def" width="125" height="39"><img src="img/retina/logo.png" alt="" class="logo_retina" width="125" height="39"></a>
<nav>
<ul class="menu">
<li class="current-menu-parent"><a href="index.html">HOME</a>
</li>
<li><a href="javascript:void(0)">PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="portfolio_grid.html">Grid Portfolio</a></li>
<li><a href="portfolio_masonry.html">Grid Portfolio with Masonry</a></li>
<li><a href="portfolio_post_fw.html">Fullscreen Portfolio Post</a></li>
<li><a href="portfolio1.html">Portfolio 1 Column</a></li>
<li><a href="portfolio2.html">Portfolio 2 Columns</a></li>
<li><a href="portfolio3.html">Portfolio 3 Columns</a></li>
<li><a href="portfolio4.html">Portfolio 4 Columns</a></li>
<li><a href="portfolio_post.html">Portfolio Post</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">VIDEOS</a>
<ul class="sub-menu">
<li><a href="gallery_kenburns.html">Kenburns Gallery</a></li>
<li><a href="gallery_grid.html">Grid Gallery</a></li>
<li><a href="gallery_masonry.html">Grid Gallery with Masonry</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">BLOG</a>
<ul class="sub-menu">
<li><a href="blog_fullscreen.html">Fullscreen</a></li>
<li><a href="blog_post_fw.html">Fullscreen Blog Post</a></li>
<li><a href="blog_full.html">Full Width</a></li>
<li><a href="blogpost_full.html">Blog Post</a></li>
<li><a href="javascript:void(0)">With Sidebar</a>
<ul class="sub-menu">
<li><a href="blog_left.html">Left Sidebar</a></li>
<li><a href="blog_right.html">Right Sidebar</a></li>
<li><a href="blogpost_sidebar.html">Blog Post</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">CONTACTS</a>
<ul class="sub-menu">
<li><a href="contact_fullscreen.html">Fullscreen</a></li>
<li><a href="contact.html">Full Width</a></li>
<li><a href="contact_sidebar.html">With Sidebar</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">FOLLOW</a>
<ul class="sub-menu">
<li><a href="typography.html">Typography</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="login.php">LOGIN </a>
<ul class="sub-menu">
<li><a href="registar.html">REGISTO</a></li>
</ul>
</li>
</ul><!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
<div class="fullscreen_block"></div>
<script>
gallery_set = [ //Gallery Data
{image : 'img/gallery/gallery01.jpg', thmb : 'img/gallery/thmb/gallery01.jpg', alt : 'Awesome Theme', fit : 'cover', title : "Awesome Theme", description: "right here we've got something you gonna love..."},
{image : 'img/gallery/gallery02.jpg', thmb : 'img/gallery/thmb/gallery02.jpg', alt : 'Lorem ipsum', fit : 'cover', title : "Lorem ipsum", description: "lorem ipsum dolor sit amet, consectetur adipiscing."},
{image : 'img/gallery/gallery03.jpg', thmb : 'img/gallery/thmb/gallery03.jpg', alt : 'Dolor sit amet', fit : 'cover', title : "Dolor sit amet", description: "proin molestie pulvinar lorem sit amet placerat."},
{image : 'img/gallery/gallery04.jpg', thmb : 'img/gallery/thmb/gallery04.jpg', alt : 'Ut luctus viv', fit : 'cover', title : "Ut luctus viv", description: "vestibulum ante ipsum primis in faucibus orci luctus."},
{image : 'img/gallery/gallery05.jpg', thmb : 'img/gallery/thmb/gallery05.jpg', alt : 'Duis ante veli', fit : 'cover', title : "Duis ante veli", description: "ut eu urna eu ipsum ultrices dapibus sit amet"},
{image : 'img/gallery/gallery06.jpg', thmb : 'img/gallery/thmb/gallery06.jpg', alt : 'Mauris pretium', fit : 'cover', title : "Mauris pretium", description: "luctus viverra urna non fermentum sit dolor."},
{image : 'img/gallery/gallery07.jpg', thmb : 'img/gallery/thmb/gallery07.jpg', alt : 'Praesent doro', fit : 'cover', title : "Praesent doro", description: "commodo nulla magna, vel dignissim dui aliquet eu."},
{image : 'img/gallery/gallery08.jpg', thmb : 'img/gallery/thmb/gallery08.jpg', alt : 'Curabitur ut', fit : 'cover', title : "Curabitur ut", description: "ante velit, blandit quis lacus eu, tincidunt vulputate."},
{image : 'img/gallery/gallery09.jpg', thmb : 'img/gallery/thmb/gallery09.jpg', alt : 'Vestibulum eget', fit : 'cover', title : "Vestibulum eget", description: "varius interdum mauris sagittis tempor."},
{image : 'img/gallery/gallery10.jpg', thmb : 'img/gallery/thmb/gallery10.jpg', alt : 'Curabitur pulvinar', fit : 'cover', title : "Curabitur pulvinar", description: "mauris pretium facilisis nisl nec suscipit."},
{image : 'img/gallery/gallery11.jpg', thmb : 'img/gallery/thmb/gallery11.jpg', alt : 'Cras lobortis est', fit : 'cover', title : "Cras lobortis est", description: "quisque in ante ut augue rutrum venenatis urna."},
{image : 'img/gallery/gallery12.jpg', thmb : 'img/gallery/thmb/gallery12.jpg', alt : 'Sed non ante', fit : 'cover', title : "Sed non ante", description: "curabitur mollis aliquet ligula tincidunt venenatis."},
{image : 'img/gallery/gallery13.jpg', thmb : 'img/gallery/thmb/gallery13.jpg', alt : 'Aliquam tincidunt', fit : 'cover', title : "Aliquam tincidunt", description: "integer risus nibh, elementum non blandit suscipit."},
{image : 'img/gallery/gallery14.jpg', thmb : 'img/gallery/thmb/gallery14.jpg', alt : 'Ut nec diam ac', fit : 'cover', title : "Ut nec diam ac", description: "morbi et dignissim tellus, eu porttitor lacus."},
{image : 'img/gallery/gallery15.jpg', thmb : 'img/gallery/thmb/gallery15.jpg', alt : 'Dignissim ac nec', fit : 'cover', title : "Dignissim ac nec", description: "in id pellentesque libero, id luctus enim."},
{image : 'img/gallery/gallery16.jpg', thmb : 'img/gallery/thmb/gallery16.jpg', alt : 'Felis id lacus', fit : 'cover', title : "Felis id lacus", description: "class aptent taciti sociosqu ad litora torquent per."},
{image : 'img/gallery/gallery17.jpg', thmb : 'img/gallery/thmb/gallery17.jpg', alt : 'Ut non lobortis', fit : 'cover', title : "Ut non lobortis", description: "phasellus id volutpat neque, ut malesuada erat."},
{image : 'img/gallery/gallery18.jpg', thmb : 'img/gallery/thmb/gallery18.jpg', alt : 'At lobortis massa', fit : 'cover', title : "At lobortis massa", description: "curabitur porta risus et consectetur consectetur."},
{image : 'img/gallery/gallery19.jpg', thmb : 'img/gallery/thmb/gallery19.jpg', alt : 'Id luctus enim', fit : 'cover', title : "Id luctus enim", description: "interdum et malesuada fames ac ante ipsum primis. "},
{image : 'img/gallery/gallery20.jpg', thmb : 'img/gallery/thmb/gallery20.jpg', alt : 'Quisque in ante ut', fit : 'cover', title : "Quisque in ante ut", description: "donec nec facilisis erat, sed porttitor odio."}
];
$('body').fs_gallery({
fx : 'fade', /*fade, zoom, slide_left, slide_right, slide_top, slide_bottom*/
slide_time : 5500, /*This time must be < then time in css*/
slides : gallery_set
});
</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/theme.js"></script>
<div class="header2top"></div>
</body>
</html>
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="ie ie9"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- Mobile Specific Metas
+++++++++++++++++++++++++++ -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favico.ico">
<link rel="apple-touch-icon" href="img/apple_icons_57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple_icons_72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple_icons_114x114.png">
<title>Frame - Top notch multipurpose HTML5 Theme.</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/plugins.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/theme_settings.css">
<link rel="stylesheet" type="text/css" href="css/skin.css">
<link rel="stylesheet" type="text/css" href="css/color_theme.css" id="theme_color">
<!--[if IE 8 ]>
<link rel="stylesheet" type="text/css" href="css/ie_css.css">
<script>
var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fs_gllaery.css">
<script type="text/javascript" src="js/fs_gllaery.js"></script>
<script language="javascript">
function show_popup(id) {
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "";
}
}
}
function hide_popup(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}
}
}
</script>
</head>
<body class="fullscreen_layout">
<div id="my_popup" style="display:none;border:1px dotted gray;padding:.3em;background-color:white;position:absolute;width:200px;height:200px;left:100px;top:100px">
<div align="right">
<a href="javascript:hide_popup('my_popup')">close</a>
</div>
<h3>Vooler PopUp</h3>
<p>You contents go here, whatever style or anything</p>
</div>
<header class="">
<div class="header_wrapper container">
<a href="index.html" class="logo"><img src="img/logo.png" alt="" class="logo_def" width="125" height="39"><img src="img/retina/logo.png" alt="" class="logo_retina" width="125" height="39"></a>
<nav>
<ul class="menu">
<li class="current-menu-parent"><a href="index.html">HOME</a>
</li>
<li><a href="javascript:void(0)">PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="portfolio_grid.html">Grid Portfolio</a></li>
<li><a href="portfolio_masonry.html">Grid Portfolio with Masonry</a></li>
<li><a href="portfolio_post_fw.html">Fullscreen Portfolio Post</a></li>
<li><a href="portfolio1.html">Portfolio 1 Column</a></li>
<li><a href="portfolio2.html">Portfolio 2 Columns</a></li>
<li><a href="portfolio3.html">Portfolio 3 Columns</a></li>
<li><a href="portfolio4.html">Portfolio 4 Columns</a></li>
<li><a href="portfolio_post.html">Portfolio Post</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">VIDEOS</a>
<ul class="sub-menu">
<li><a href="gallery_kenburns.html">Kenburns Gallery</a></li>
<li><a href="gallery_grid.html">Grid Gallery</a></li>
<li><a href="gallery_masonry.html">Grid Gallery with Masonry</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">BLOG</a>
<ul class="sub-menu">
<li><a href="blog_fullscreen.html">Fullscreen</a></li>
<li><a href="blog_post_fw.html">Fullscreen Blog Post</a></li>
<li><a href="blog_full.html">Full Width</a></li>
<li><a href="blogpost_full.html">Blog Post</a></li>
<li><a href="javascript:void(0)">With Sidebar</a>
<ul class="sub-menu">
<li><a href="blog_left.html">Left Sidebar</a></li>
<li><a href="blog_right.html">Right Sidebar</a></li>
<li><a href="blogpost_sidebar.html">Blog Post</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">CONTACTS</a>
<ul class="sub-menu">
<li><a href="contact_fullscreen.html">Fullscreen</a></li>
<li><a href="contact.html">Full Width</a></li>
<li><a href="contact_sidebar.html">With Sidebar</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">FOLLOW</a>
<ul class="sub-menu">
<li><a href="typography.html">Typography</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="login.php">LOGIN </a>
<ul class="sub-menu">
<li><a href="registar.html">REGISTO</a></li>
</ul>
</li>
</ul><!-- .menu -->
<div class="clear"></div>
</nav>
</div>
</header>
<div class="fullscreen_block"></div>
<script>
gallery_set = [ //Gallery Data
{image : 'img/gallery/gallery01.jpg', thmb : 'img/gallery/thmb/gallery01.jpg', alt : 'Awesome Theme', fit : 'cover', title : "Awesome Theme", description: "right here we've got something you gonna love..."},
{image : 'img/gallery/gallery02.jpg', thmb : 'img/gallery/thmb/gallery02.jpg', alt : 'Lorem ipsum', fit : 'cover', title : "Lorem ipsum", description: "lorem ipsum dolor sit amet, consectetur adipiscing."},
{image : 'img/gallery/gallery03.jpg', thmb : 'img/gallery/thmb/gallery03.jpg', alt : 'Dolor sit amet', fit : 'cover', title : "Dolor sit amet", description: "proin molestie pulvinar lorem sit amet placerat."},
{image : 'img/gallery/gallery04.jpg', thmb : 'img/gallery/thmb/gallery04.jpg', alt : 'Ut luctus viv', fit : 'cover', title : "Ut luctus viv", description: "vestibulum ante ipsum primis in faucibus orci luctus."},
{image : 'img/gallery/gallery05.jpg', thmb : 'img/gallery/thmb/gallery05.jpg', alt : 'Duis ante veli', fit : 'cover', title : "Duis ante veli", description: "ut eu urna eu ipsum ultrices dapibus sit amet"},
{image : 'img/gallery/gallery06.jpg', thmb : 'img/gallery/thmb/gallery06.jpg', alt : 'Mauris pretium', fit : 'cover', title : "Mauris pretium", description: "luctus viverra urna non fermentum sit dolor."},
{image : 'img/gallery/gallery07.jpg', thmb : 'img/gallery/thmb/gallery07.jpg', alt : 'Praesent doro', fit : 'cover', title : "Praesent doro", description: "commodo nulla magna, vel dignissim dui aliquet eu."},
{image : 'img/gallery/gallery08.jpg', thmb : 'img/gallery/thmb/gallery08.jpg', alt : 'Curabitur ut', fit : 'cover', title : "Curabitur ut", description: "ante velit, blandit quis lacus eu, tincidunt vulputate."},
{image : 'img/gallery/gallery09.jpg', thmb : 'img/gallery/thmb/gallery09.jpg', alt : 'Vestibulum eget', fit : 'cover', title : "Vestibulum eget", description: "varius interdum mauris sagittis tempor."},
{image : 'img/gallery/gallery10.jpg', thmb : 'img/gallery/thmb/gallery10.jpg', alt : 'Curabitur pulvinar', fit : 'cover', title : "Curabitur pulvinar", description: "mauris pretium facilisis nisl nec suscipit."},
{image : 'img/gallery/gallery11.jpg', thmb : 'img/gallery/thmb/gallery11.jpg', alt : 'Cras lobortis est', fit : 'cover', title : "Cras lobortis est", description: "quisque in ante ut augue rutrum venenatis urna."},
{image : 'img/gallery/gallery12.jpg', thmb : 'img/gallery/thmb/gallery12.jpg', alt : 'Sed non ante', fit : 'cover', title : "Sed non ante", description: "curabitur mollis aliquet ligula tincidunt venenatis."},
{image : 'img/gallery/gallery13.jpg', thmb : 'img/gallery/thmb/gallery13.jpg', alt : 'Aliquam tincidunt', fit : 'cover', title : "Aliquam tincidunt", description: "integer risus nibh, elementum non blandit suscipit."},
{image : 'img/gallery/gallery14.jpg', thmb : 'img/gallery/thmb/gallery14.jpg', alt : 'Ut nec diam ac', fit : 'cover', title : "Ut nec diam ac", description: "morbi et dignissim tellus, eu porttitor lacus."},
{image : 'img/gallery/gallery15.jpg', thmb : 'img/gallery/thmb/gallery15.jpg', alt : 'Dignissim ac nec', fit : 'cover', title : "Dignissim ac nec", description: "in id pellentesque libero, id luctus enim."},
{image : 'img/gallery/gallery16.jpg', thmb : 'img/gallery/thmb/gallery16.jpg', alt : 'Felis id lacus', fit : 'cover', title : "Felis id lacus", description: "class aptent taciti sociosqu ad litora torquent per."},
{image : 'img/gallery/gallery17.jpg', thmb : 'img/gallery/thmb/gallery17.jpg', alt : 'Ut non lobortis', fit : 'cover', title : "Ut non lobortis", description: "phasellus id volutpat neque, ut malesuada erat."},
{image : 'img/gallery/gallery18.jpg', thmb : 'img/gallery/thmb/gallery18.jpg', alt : 'At lobortis massa', fit : 'cover', title : "At lobortis massa", description: "curabitur porta risus et consectetur consectetur."},
{image : 'img/gallery/gallery19.jpg', thmb : 'img/gallery/thmb/gallery19.jpg', alt : 'Id luctus enim', fit : 'cover', title : "Id luctus enim", description: "interdum et malesuada fames ac ante ipsum primis. "},
{image : 'img/gallery/gallery20.jpg', thmb : 'img/gallery/thmb/gallery20.jpg', alt : 'Quisque in ante ut', fit : 'cover', title : "Quisque in ante ut", description: "donec nec facilisis erat, sed porttitor odio."}
];
$('body').fs_gallery({
fx : 'fade', /*fade, zoom, slide_left, slide_right, slide_top, slide_bottom*/
slide_time : 5500, /*This time must be < then time in css*/
slides : gallery_set
});
</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/theme.js"></script>
<div class="header2top"></div>
</body>
</html>
Cumps.