|
 |
ใครมีโค๊ดทำ pop up วินโดว์ที่โผล่มาตอนเปิดเว็บ ต้องการใช้ด่วนจริงๆ |
| |
 |
|
|
 |
 |
|
ClueTip Tooltips ของ jQuery ลองไปดูสิ
|
 |
 |
 |
 |
| Date :
2010-09-01 14:37:52 |
By :
ิburn |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ทำเล่น
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>JQuery Pop Up</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* Bubble pop-up */
.popup
{
display: none;
position: absolute;
z-index: 50;
bottom: 20px;
right: 20px;
border-collapse: collapse;
}
.popup td.corner {
height: 15px;
width: 19px;
}
.popup td#topleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-1.png); }
.popup td.top { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-2.png); }
.popup td#topright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-3.png); }
.popup td.left { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-4.png); }
.popup td.right { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-5.png); }
.popup td#bottomleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-6.png); }
.popup td.bottom { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-7.png); text-align: center;}
.popup td.bottom img { display: block; margin: 0 auto; }
.popup td#bottomright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-8.png); }
.popup table.popup-contents {
font-size: 12px;
line-height: 1.2em;
background-color: #fff;
color: #666;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
}
table.popup-contents th {
text-align: right;
text-transform: lowercase;
}
table.popup-contents td {
text-align: left;
}
tr#release-notes th {
text-align: left;
text-indent: -9999px;
background: url(http://jqueryfordesigners.com/demo/images/coda/starburst.gif) no-repeat top right;
height: 17px;
}
tr#release-notes td a {
color: #333;
}
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dpop').delay(2000).slideDown(1000);
$('#dpop').delay(5000).slideUp(1000);
});
</script>
</head>
<body>
<div>
<table id="dpop" class="popup">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td>
<table class="popup-contents">
<tbody>
<tr>
<th>Name:</th>
<td>Tungman</td>
</tr>
<tr>
<th>Date:</th>
<td>1/8/2010</td>
</tr>
<tr>
<th>Country:</th>
<td>ThaiLand</td>
</tr>
<tr>
<th>Browser:</th>
<td>Firefox</td>
</tr>
<tr id="release-notes">
<th>www.thaicreate.com:</th>
<td><a title="www.thaicreate.com" href="https://www.thaicreate.com">www.thaicreate.com</a></td>
</tr>
</tbody>
</table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
อย่าลืม reference jquery ด้วย
|
ประวัติการแก้ไข
2010-09-01 15:39:22
2010-09-01 15:43:29
| |
|
|
| |
| Date :
2010-09-01 15:37:43 |
By :
tungman |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เจ๋งมากเลยครับพี่ tungman
|
| |
|
|
| |
| Date :
2010-09-02 10:01:52 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่ได้ทำเองหมดหรอก ไปเอากรอบเขามา แล้วเขียน jquery + กำหนดตำแหน่ง css ต่อแค่นี้เอง
Code (C#)
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dpop').delay(2000).slideDown(1000); //กำหนดค่าเอาเองได้ว่าจะเอาเท่าไหร่
$('#dpop').delay(5000).slideUp(1000); //กำหนดค่าเอาเองได้ว่าจะเอาเท่าไหร่
});
</script>
Code (C#)
.popup
{
display: none;
position: absolute; /* ตรงนี้ ให้เป็นจุด reference */
z-index: 50;
bottom: 20px; /* ตรงนี้ ให้เป็นจุด reference */
right: 20px; /* ตรงนี้ ให้เป็นจุด reference */
border-collapse: collapse;
}
|
| |
|
|
| |
| Date :
2010-09-02 13:45:46 |
By :
tungman |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
