Еще 1 проблема!
Решил предыдущую проблему=)
Самая главная проблема: решил сделать сплывающий блок с текстом что типо fancybox но без jQuery!(только проше без коментов типа: изобретаеш велосипед или нафик надо)! и вот думаю что лутче скрывать(отображать) блок с помощью ДОМ модели или просто с помощью css(display)! |
Цитата:
|
function opBlock(){
var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
var clas=links[i].className.indexOf('openBlock');
if(clas!=-1){
links[i].onclick=op;
}
}
}
function op(){
var d=document.getElementById('dv');
var block=document.getElementById('block');
var closed=document.getElementById('posClos');
elements(block,this.className);
d.style.display='block';
block.style.display='block';
closed.style.display='block';
}
function closed(){
var d=document.getElementById('dv');
var block=document.getElementById('block');
var closed=document.getElementById('posClos');
d.style.display='none';
block.style.display='none';
closed.style.display='none';
}
function elements(block,cl,d){
var start=cl.indexOf('openBlock');
var clasS;
if(start==0){
clasS=cl.slice(9,cl.length);
}
else if(start>0){
clasS=cl.slice(0,start)
}
else alert("неправильно присвоенный класс !!");
var content=document.getElementsByClassName(clasS);
for(var i=0;i<content.length;i++){
if(content[i].tagName !="a"){
content=content[i];
}
}
content=content.innerHTML;
var closd='<img src="headerGalery/img/close.png" id="posClos" />';
block.innerHTML=closd +content;
}
пока готов ток 1 тестовый вариант=) |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css" >
<title>Документ без названия</title>
<script type="text/javascript" src="headerGalery/HD.js"></script>
<script type="text/javascript">
window.onload=function(){
opBlock();
document.getElementById("posClos").onclick=closed;
}
</script>
</head>
<body>
<div id="dv"></div>
<div id="block"></div>
<div id="page">
<div id="header">
<div class="form" style="display:none;">
<p>
<form action="" method="post" name="attorization" class="formAttorization" >
<p>Введите Логин</p>
<input type="text" name="username"/>
<p>Введите пароль</p>
<input type="password" name="pass"/>
<p><a href="#">Регистрация</a></p>
<p><input type="submit" name="sm" value="Войти"/></p>
</form></p>
</div>
<img src="all/images/cyber-war-photo-2.jpg" class="header" / >
<div id="container-menu">
<div id="left"></div>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#" class="openBlock form" >Вход</a></li>
</ul>
<div id="right"></div>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
Цитата:
Цитата:
|
css в данный момент очень пичальный=)
щас повышаю паралельно уровень знаний css
@charset "windows-1251";
*{margin:0; padding:0;}
.formAttorization{
padding:3% 0 5% 40%;}
#posClos{
display:none;
cursor:pointer;}
#block{
width:30%;
height:auto;
background-color:#FFF;
position:absolute;
z-index:2;
margin:30% 20% 20% 30%;
border-radius:20px;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
opacity:0.9;
display:none;
}
#dv{
z-index:1;
position:absolute;
width:100%;
height:100%;
background-color:#000;
opacity:0.6;
display:none;}
img{
border:0px;}
.header{width:100%;
height:300px;}
#header{
height:25%;}
body{
background-image:url(all/images/bg.gif);
background-repeat:repeat;
}
#page {
margin:0 auto;
margin-left:25%;
margin-right:25%;
background-image:url(all/images/bg.jpg);
background-repeat:repeat;
border:1px solid black;
height:900px;
position:relative;}
#left {
background:#000 url(images/left.gif) no-repeat;
height:50px;
width:14px;
float: left;
border-radius:7px 0 0 7px;
}
#right {
background: #000 url(images/right.gif) no-repeat;
width:27px;
height:50px;
float: left;
border-radius:0 7px 7px 0;
}
ul {
list-style: none;
background: #000 url(images/bg.gif) repeat-x;
height: 50px;
float: left;
width:95%;
}
ul li {
display:inline;
float: left;
height: 56px;
margin-right:5%;
margin-left:5%;
}
ul li a {
text-decoration: none;
color: #fff;
padding: 0 10px;
height: 56px;
display: table-cell;
vertical-align: middle;
}
ul li a:hover {
background: #95009E url(images/a-hover.gif) no-repeat;
height:50px;
}
#container-menu{
margin-top:1px;
}
|
Цитата:
я думаю развивать скрипт в томже направление или делать с помощью DOM |
И вчем будет "разница" между теми двумя вариантами? :)
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 15:47. |