 נושא: יצירת חלון קופץ באתר
|
 
|
| כותב |
|
sagis
משתמש מתחיל
הצטרף / הצטרפה: 29 December 2011
מדינה: Israel
משתמש: מנותק/ת
הודעות: 2
|
| נשלח בתאריך: 04 January 2012 בשעה 20:18 | | IP רשוּם
|
|
|
|
אני רוצה ליצור חלון קופץ באתר שאני בונה,אבל אני לא רוצה שהוא יהיה בדף חדש אלא באותו דף .
במילים אחרות זה באנר קופץ שהופך את העמוד לכהה ורק הבאנר בולט באמצע.
אשמח אם תעזרו לי תודה רבה!!
__________________
שגיא סופר
|
| חזרה לתחילת העמוד |
|
| |
חיימקה
משתמש חבר
הצטרף / הצטרפה: 18 April 2010
מדינה: Israel
משתמש: מנותק/ת
הודעות: 243
|
| נשלח בתאריך: 05 January 2012 בשעה 21:35 | | IP רשוּם
|
|
|
|
בס"ד
אין לי כרגע זמן לכתוב את כל הקוד, אבל זה האלגוריתם. בהצלחה! (אנסה לכתוב ב"שלוף" את המאפיינים, סליחה אם אינני מדייק)
השלבים:
- div שמאפייניו הם:
לא נגלל עם הדף, (posituin:fixed)
מיקום באמצע העמוד, (:top: left)
רקע בהיר, (background: )
מוסתר. (display:none)
- בעת האירוע שמקפיץ את החלון:
מוצג, (display:inline)
רקע העמוד מוכהה (dofcument.body.style.background)
- בלחיצה על מקום אחר בדף (או על סימן X המוכלל ב div הנ"ל וכד'):
רקע העמוד מובהר,
ה div מוסתר.
__________________
אין יאוש בעולם כלל!
|
| חזרה לתחילת העמוד |
|
| |
חיימקה
משתמש חבר
הצטרף / הצטרפה: 18 April 2010
מדינה: Israel
משתמש: מנותק/ת
הודעות: 243
|
| נשלח בתאריך: 10 January 2012 בשעה 00:16 | | IP רשוּם
|
|
|
|
בס"ד
הנה גם קוד...
קוד:
<html>
<head>
<style type='text/css'>
html,body,div#main
{
direction:rtl;
}
table.headLine
{
background-color:#3399ff;
width:100%;
height:15%;
float:right;
padding-bottom:1px;
}
td.exit
{
border:solid 1px;
padding:0px 5px;
font-weight:bold;
font-weight:bold;
color:white;
background-color:brown;
}
td.min,td.resize
{
color:white;
border:solid 1px;
padding:0px 7px;
font-weight:bold;
}
div#popup
{
border:double 5px #3399ff;
color:brown;
position:fixed;
display:none;
background-color:white;
}
div#reIcon
{
width:60%;
height:30%;
border:solid 1px;
border-right:double;
border-top:double;
}
div#minIcon
{
width:95%;
height:30%;
border:solid 1px #3399ff;
border-bottom:solid 3px white;
}
input#butt
{
font-size:x-large;
height:60px;
width:120px;
}
</style>
<head>
<body id='body'>
<div id='popup'>
<div class='headLine'>
<table class='headLine'>
<tr>
<td title='סגור' class='exit' onclick='HidePopup();'>X</td>
<td title='מזער' class='min' onclick='MinPopup();'>
<div id='minIcon' style=''> </div>
</td>
<td title='שחזר' class='resize' onclick='ResizePopup();'>
<div id='reIcon' > </div>
</td>
<td style='width:100%;'> </td>
</tr>
</table>
</div>
<div id='popupContent'>
הקפצת חלון!<br />
תוכל למזער, לשחזר, ולסגור.
בינתיים, תוכל לגלול את החלון ברקע...
</div>
</div>
<div id='main'>
<p><input id='butt' type='button' value='הקפץ חלון' onclick='ShowPopup();'/></p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
<p>שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן שאר התוכן </p>
</div>
</body>
<script type='text/javascript'>
var pop = document.getElementById('popup');
var butt = document.getElementById('butt');
var main = document.getElementById('main');
var gray = 'rgb(64,64,64)';
function ShowPopup()
{
butt.style.backgroundColor =
butt.style.borderColor =
butt.style.color =
main.style.backgroundColor = gray;
pop.style.display = 'inline';
pop.style.height = '30%';
pop.style.width = '30%';
pop.style.top = '35%';
pop.style.left = '35%';
butt.disabled = 'disabled';
}
function HidePopup()
{
pop.style.display = 'none';
butt.style.backgroundColor =
butt.style.borderColor =
main.style.backgroundColor = '';
butt.disabled = '';
}
function MinPopup()
{
pop.style.height = '4%';
pop.style.width = '10%';
pop.style.top = '95%';
pop.style.left = '0%';
main.style.backgroundColor =
butt.style.backgroundColor = '';
}
function ResizePopup()
{
ShowPopup();
}
</script>
</html>
|
|
|
__________________
אין יאוש בעולם כלל!
|
| חזרה לתחילת העמוד |
|
| |
|
|
אם ברצונך להגיב לנושא זה עליך קודם להתחבר
אם אינך רשום/ה כבר עליך להרשם
|
|
אינך יכול/ה לשלוח נושאים חדשים בפורום זה
אינך יכול/ה להגיב לנושאים בפורום זה
אינך יכול/ה למחוק את הודעותיך ותגוביך בפורום זה
אינך יכול/ה לערוך את הודעותיך ותגובותיך בפורום זה
אינך יכול/ה לצור סקרים בפורום זה
אינך יכול/ה להצביע בסקרים בפורום זה
|
נושאים פעילים
רשימת משתמשים
חיפוש
עזרה
הרשמה
התחברות
UnderWarrior Forums : 
בניית אתרים
