Tạo cửa sổ động

Posted on March 22, 2008
by Blog.thegioiwebsite.Net Học Javascripts |

Đây là 1 chức năng của JavaScript code để giúp bạn tạo ra 1 cửa sổ động. Nó đã thử nghiệm thành công trên IE6, Mozilla/Firefox, Opera 7.54 (Windows), Safari, Mozilla (Macintosh). Download file .js này về và include nó vào trong trang html của bạn như hình dưới:
 
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Floating Window</title>
<script src="Drag.js"></script>
</head>
<body>

.......

</body>
</html>



Code của cửa sổ động như sau:


<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; display:none;">

<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">

<div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div>

<div style="position:absolute; top:3px; left:377px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';">

<img src="How can I create a floating window on my html page.files/close_btn.gif" border="0"/>

</div>

</div>
<br/>
<div style="margin-left:20px;">your content here...</div>

<div style="margin-left:30px;">your content here...</div>

<div style="margin-left:40px;">your content here...</div>
<br/>

</div>

Nếu bạn có thêm kỹ năng trong CSS và lập trình JavaScript, bạn có thể thêm vào nhiều thiết kế và chức năng hấp dẫn cho chính cửa sổ này của mình.


Bookmark


Comments

2 Responses to “Tạo cửa sổ động”

  1. rongcondihoc on March 31st, 2008 10:49 am

    tui kô thấy link down file Drag.js

  2. hue on May 23rd, 2008 6:07 pm

    mình cũng ko thấy file drag.js
    làm sao có thể down được file đó vậy?

Leave a Reply