jQuery popup

V

Vladkata

Registered
Здравейте! Трябваше ми стилен попъп прозорец, но не намерих такъв тук. Намерих си обаче урок за jQuery логин кутия...

Искам да я направя да е попъп - тя сега се отваря като се кликне текста "Вход към админ панела ->", а на мен ми трябва автоматично със страницата да се отваря, без да се клика. Пробвах различни начини, но не стана...

Ето кода - всичко е събрано в един файл:
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Popup</title> 
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script>
$(document).ready(function() {	
$('a[name=modal]').click(function(e) { 
e.preventDefault(); 
var id = $(this).attr('href'); 
var maskHeight = $(document).height(); 
var maskWidth = $(window).width(); 
$('#mask').css({'width':maskWidth,'height':maskHeight}); 
$('#mask').fadeIn(1000);	
$('#mask').fadeTo("slow",0.8);	
var winH = $(window).height(); 
var winW = $(window).width(); 
$(id).css('top', winH/2-$(id).height()/2); 
$(id).css('left', winW/2-$(id).width()/2); 
$(id).fadeIn(2000); 
}); 
$('.window .close').click(function (e) { 
e.preventDefault(); 
$(this).window({ autoOpen: true });
$('#mask').hide(); 
$('.window').hide(); 
});	
$('#mask').click(function () { 
$(this).hide(); 
$('.window').hide(); 
});	
});
</script> 
<style> 
body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#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; 
} 

#boxes #dialog { 
width:375px; 
height:203px; 
padding:10px; 
background-color:#ffffff; 
} 

#boxes #dialog1 { 
width:375px; 
height:203px; 
} 

#dialog1 .d-header { 
background:url(images/login-header.png) no-repeat 0 0 transparent; 
width:375px; 
height:150px; 
} 

#dialog1 .d-header input { 
position:relative; 
top:60px; 
left:100px; 
border:2px solid #EB0873; 
height:22px; 
width:200px; 
font-size:15px; 
padding:5px; 
margin-top:4px; 
} 

#dialog1 .d-blank { 
float:left; 
background:url(images/login-blank.png) no-repeat 0 0 transparent; 
width:267px; 
height:53px; 
} 

#dialog1 .d-login { 
float:left; 
width:108px; 
height:53px; 
} 
</style> 
</head> 
<body> 

<ul> 
<li><a href="#dialog1" name="modal">Вход към админ панела -></a></li> 
</ul> 

<div id="boxes"> 
<div id="dialog1" class="window"> 
<div class="d-header"> 
Съдържанието...
</div> 
<div class="d-blank"></div> 
<div class="d-login"> 
<input type="image" alt="Login" title="Вход" src="images/login-button.png"/></div> 
</div> 
<div id="mask"></div> 
</div> 
</body> 
</html>

Има си стил, картинки всичко. Скрипта е само този горе, поместен в <head>.

51ec90f1f75fdde1.png
Свали всичко

Благодаря предварително!
 
Най-лесно, без да се разбутва скрипта ще стане така:
Добавяш ID на линка, с който показваш модалния прозорец.
Джаваскрипт кода ти е направен да се изпълнява след като зареди DOM-а на страницата посредством този код:
[js]$(document).ready(function(){
// останалата част от кода ти..
});[/js]
Точно преди последният ред на този код ще поставиш това:
[js]$('#elementID').trigger('click'); // Смени elementID с ID-то, което си използвал ти[/js]
И кода ти ще изглежда така:
[js]$(document).ready(function(){
// останалата част от кода ти..
$('#elementID').trigger('click');
});[/js]
Редът който добави симулира click event на DOM елемента, който показва прозореца за логин.
 
Благодаря за бързия отзив! Знам, че съм нахален, ама ще може ли да го пригодиш спрямо кода - ид-та и т.н., че не съм започвал js, jquery...
Благодаря предварително!!!
 
Гледах да го обясня що-годе добре, но ето готовият код. Маркирал съм разликите в синьо.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$(this).window({ autoOpen: true });
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$('#showLoginWin').trigger('click');
});
</script>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#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;
}

#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}

#boxes #dialog1 {
width:375px;
height:203px;
}

#dialog1 .d-header {
background:url(images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}

#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:2px solid #EB0873;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}

#dialog1 .d-blank {
float:left;
background:url(images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}

#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}
</style>
</head>
<body>

<ul>
<li><a href="#dialog1" name="modal" id="showLoginWin">Вход към админ панела -></a></li>
</ul>

<div id="boxes">
<div id="dialog1" class="window">
<div class="d-header">
Съдържанието...
</div>
<div class="d-blank"></div>
<div class="d-login">
<input type="image" alt="Login" title="Вход" src="images/login-button.png"/></div>
</div>
<div id="mask"></div>
</div>
</body>
</html>
Увеличете...
 
Не става нищо, дори като се натисне... Напиши ми скайпа ти на ЛС, ако ти се занимава да ми помогнеш.
Благодаря предварително!
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе