|
 |
| |
<<<---- เว็บที่มีหน้าจอ โด่ง หรือ เด่ง ขึ้นมา ทำอย่างไรครับ |
| |
 |
|
|
 |
 |
|
เริ่มที่ jquery ครับ
บางอย่างก็มีผู้พัฒานาไว้ให้แล้ว
ลองดูนะครับ
|
 |
 |
 |
 |
| Date :
2010-07-09 19:43:36 |
By :
ขนมหม้อแกง |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองเอา code นี้ไปรันดูค่ะ Div modal dialoq มีโครงสร้างง่ายมาก
ตัวนี้ไปหามาเพื่อไว้เรียนรู้เอาไปใช้งานจริงอาจขลุกขลักบ้าง
แต่ก้อเรียบง่ายดีค่ะ
อ้อ code จะทำงานเมื่อ connect internet นะคะ
เอาไป patse ใน html ทำดาๆ นี่แหละค่ะ
รันผ่าน browser
Code (PHP)
<!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>Simple JQuery Modal Window </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//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(1000);
$('#mask').fadeTo("slow", 0.8);
//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 .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#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;
}
</style>
</head>
<body>
<a href="#dialog" name="modal">Simple Window Modal</a>
<div style="font-size: 10px; color: #ccc">
Except where otherwise noted, content on this site is licensed under a Creative
Commons Attribution 3.0 License.</div>
<div id="boxes">
<div id="dialog" class="window">
Simple Modal Window | <a href="#" class="close" />Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask">
</div>
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2010-07-09 20:34:29 |
By :
blurEyes |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ครับ ขอบคุณครับ
|
| |
|
|
| |
| Date :
2010-07-10 06:13:58 |
By :
HeroPHP |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
