Jump to content
vtsokalo

Background a frente de tudo (template)

Recommended Posts

vtsokalo

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.

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

Cumps.

Share this post


Link to post
Share on other sites
Pivot

Aconselho-te a fazeres o seguinte nos inputs do formulário:

<input type="text" id="user" required>

Assim escusas de ter código javascript adicional para a verificação dos campos, se já estão ou não preenchidos.

Abraço,

Rafael.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.