Pop-Up by JavaScript and CSS
سلام
تو این آموزش قصد داریم یه پنجره ی pop-up رو درست کنیم.
یک پنجره ی ساده
اساس کار اینه که پنجره توی صفحه قرار داره
یعنی ما از لایه (div) استفاده می کنیم.
کد زیر رو اجرا کنید :
HTML:
!<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {
background-color: #FF0000;
width:150px;
height:200px;
font-size: 12px;
font-family: Tahoma, "Times New Roman";
color: #FFFFFF;
}
.style3 {
font-family: Tahoma, "Times New Roman";
color: #000099;
font-size: 12px;
}
-->
</style>
<script language="javascript" type="text/javascript">
function show_layer(id){
layer=document.getElementById(id);
if(layer.style.display=="none"){
layer.style.display="block";
}else{
layer.style.display="none";
}
}
</script>
</head>
<body>
<p><a href="javascript:show_layer('layer1');" class="style3">Click Here</a></p>
<p> <br />
<br />
</p>
<div id="layer1" align="center" style="display:none" class="style2">این پنجره ی پاپ آپ شماست </div>
</body>
</html>
تابعی که معرفی کردیم اینه :
HTML:
<script language="javascript" type="text/javascript">
function show_layer(id){
layer=document.getElementById(id);
if(layer.style.display=="none"){
layer.style.display="block";
}else{
layer.style.display="none";
}
}
</script>
«« اگه پنجره نشون داده نشده بود نشونش بده
اگرنه مخفیش کن »»
با مشخص کردن ویژگی id برای تگ می تونیم اون رو به تابع ارجاع بدیم و یک شی با این ویژگی بسازیم.
(خوبی تابع اینجا معلوم میشه)
و در پایان هم این تابع رو از جاوااسکریت با یک لینک اجرا می کنیم.
به همین راحتی
البته توی آموزش هامون یک آموزش ساخت منوی داینامیک با اجاوا اسکریپت بود که اگه تنبلی نمی کردین و می گشتین تا پیداش کنین دیگه نیازی به این آموزش نبود.
منبع :
مهرآرين
البته من چند وقت پیش هم یه آموزش شبیه همین هم توی مهرآرین و هم توی مجید آنللاین گذاشتم که اگه سرچ می کردی بهتر بود.
