סוג של פופ אפ-כיצד בונים?

[dabi]

אהלן
הרבה אתרים משתמשים בסוג של פופ אפ להרשמה לאתר
http://www.buy2.co.il/Home/DailyDeal
יפתח לכם סוג של פופ אפ
אם תחלצו מחוץ לפופ אפ הזה הוא יעלם
איך בונים את זה?
הרי זה לא פופ אפ רגיל של HTML או ALET של JS
אשמח...
תודה

[Ori The Man]

jquery
http://lmgtfy.com/?q=jquery+popup

יש כל מיני סקריפטים מוכנים

[IgalSt]

ואפשר לעשות משהו כזה בקלות גם ללא כל javascript, תוך שימוש ב-css בלבד:

http://jsfiddle.net/igalst/xDCuy/1/

אפשר גם להוסיף אנימציות CSS במידת הצורך.

[dabi]

נכתב במקור על ידי IgalSt

ואפשר לעשות משהו כזה בקלות גם ללא כל javascript, תוך שימוש ב-css בלבד:

http://jsfiddle.net/igalst/xDCuy/1/

אפשר גם להוסיף אנימציות CSS במידת הצורך.

בידיוק מה שחיפשתי CSS בלבד זה נהדר
אבל חסר לי פה 2 גורמים
1)שאם לוחצים על המסך מחוץ ל'פופ אפ' ה 'פופ אפ 'יעלם
2)שיהיה כפתור X בתוך הפופ אפ כדי לסגור אותו

תודה רבה

[איציק ברבי]

נכתב במקור על ידי dabi

בידיוק מה שחיפשתי CSS בלבד זה נהדר
אבל חסר לי פה 2 גורמים
1)שאם לוחצים על המסך מחוץ ל'פופ אפ' ה 'פופ אפ 'יעלם
2)שיהיה כפתור X בתוך הפופ אפ כדי לסגור אותו

תודה רבה

הjs בסך הכל עושה את התצוגה. יעלים/יציג את הבלוק.
אתה חייב שימוש כאן ב js או שתשתמש ב experrsion ב css.

Cבcss אתה מגדיר את התצוגה שלך הדף, גודל/אורך/בהירות וכ׳ו.

ומחוץ לpopup יש אירוע שנקרא bind אני אגיע לבית ואחפש לך את זה.

[איציק ברבי]

אני לא מצליח לערוך:
the api
http://pastebin.com/nhRqRZKm

active code

PHP קוד:

$("div.closebutton").bind("clickoutside", function(event){
        $("div.thediv").hide();
    }); 


[daNN]

בפשטות,
jQuery Dialog

http://jqueryui.com/dialog/

בהצלחה.

[IgalSt]

נכתב במקור על ידי dabi

בידיוק מה שחיפשתי CSS בלבד זה נהדר
אבל חסר לי פה 2 גורמים
1)שאם לוחצים על המסך מחוץ ל'פופ אפ' ה 'פופ אפ 'יעלם
2)שיהיה כפתור X בתוך הפופ אפ כדי לסגור אותו

תודה רבה

בבקשה:
http://jsfiddle.net/igalst/xDCuy/3/

רק תעצב את ה-X איך שבא לך. אם תרצה תמונה אז תמונה, צבע אחר וכו'.
תוכל לשחק גם עם המיקום שלו.

לא צריכים פה JS, אולי רק איזשהו fallback שידע להציג ולהסתיר במידה ואין תמיכה ב- target selector בדפדפן.
פתרונות עם jqeurty בכלל מיותרים. אין שום סיבה לטעון כ"כ הרבה קוד javascript רק כדי לעשות את הפונקציונליות הפשוטה הזאת.