simple popup

    המשימה שקיבלנו הפעם היא ליצור חלון קופץ מעוצב לאתר.

    אז למה זה טוב? חלון קופץ יכול לשמש ככלי חזק וידידותי מאוד לאינטראקציה עם המשתמש,  למשל תוכלו לבקש כתובת אימייל מכל מי שנכנס לאתר, לשלוח למשתמש הודעת תודה נחמדה לאחר ההרשמה, לבקש את אישור המשתמש להמשיך עם פעולה מסויימת, להוציא טופס מהדף לחלון קופץ (למשל כדי לשמור על דף “נקי” יותר), או להעביר כל מסר אותו תרצו להבליט.

    והנה יש לנו כאן פופאפ פשוט ונחמד שעליו נעבוד היום:

    image

    בתמונה רואים פופאפ עם כפתור צהוב גדול איקס קטן  ויש גם כפתור  קטן שאינו חלק מהפופאפ אלא משמש אותי לפתיחתו, הוא ממוקם למעלה בצד שמאל (מוסתר מעט היות והפופאפ פתוח) .

    הדרישות הם, שהפופאפ תמיד יעלה בדיוק באמצע המסך,  ושלחיצה או על הרקע השחור או על הכפתור הצהוב או על האיקס תסגור אותו  (כמובן שכל מקרה לגופו זה יהיה תלוי מהי מטרת הפופאפ. ברור שיהיו מקרים שבהם לא תרצו לאפשר למשתמש לסגור אותו אלא לדוגמא בלחיצה על הכפתור הצהוב שיהווה כפתור “אישור”, או שהפופאפ יכיל שדה להזנת כתובת אימייל והכפתור הצהוב יהווה כפתור “שלח” שיוביל את המשתמש לדף רק לאחר ש”חלבתם” ממנו את כתובת האימייל שלו)

    השיטה הפשוטה ביותר ולכן גם הטובה ביותר (על פי עיקרון ה KISS המפורסם, שנכון בכל תחומי החיים ועל אחת כמה וכמה בכתיבת קוד ובבניית אתר…)  לבניית פופאפ היא השיטה שאני הולך להראות, אך כמובן שקיימות דרכים נוספות.

    אז הנה קוד ה html:

    Code Snippet
    <body>
        <input type=”button” value=”Show popup” onclick=”toggleElemById(‘simple-popup’)“ />

        <div class=”simple-popup” id=”simple-popup”>
            <div onclick=”toggleElemById(‘simple-popup’)“ class=”simple-popup-overlay”></div>
            <div class=”simple-popup-body”>
                <div class=”simple-popup-header”>
                    <h2>Title Here</h2>
                    <span onclick =”toggleElemById(‘simple-popup’)“>x</span>
                </div>
                <div class=”simple-popup-message”>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc metus nibh
                    cursus etrutrum at, semper nec magna.Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Nunc metus nibh, cursus etrutrum at,
                    semper nec magna.
                </div>
                <div class=”simple-popup-action”>
                    <input type=”button” value=”Action Button” onclick=”toggleElemById(‘simple-popup’)“ />
                </div>
            </div>
        </div>
    </body>

    בשורה הראשונה יש לנו כפתור שלחיצה עליו פותחת את הפופאפ, הלחיצה קוראת למתודה בשם toggleElemById שכשמה היא מקבלת id של אלמנט, והופכת אותו מנראה ללא נראה וחוזר חלילה (הסיבה שהשתמשתי בה ולא בפונקציה שרק פותחת היא כדי שאוכל להשתמש באותה פונקציה גם לסגירת הפופאפ ואמנע מכפילות קוד).

    לאחר מכן יש לנו את הפופאפ, שבתוכו יש 2 divs עיקריים, הראשון משמש ככיסוי לכל הדף (כיסוי שקוף חלקית) והשני מהווה את הפופאפ עצמו.

    תוך הפופאפ מאוד פשוט,  div ובתוכו מקום לכותרת, x לסגירה, ההודעה עצמה, ולבסוף כפתור הפעולה הראשי שבמקרה שלנו הוא פשוט סוגר את הפופאפ.

    ועכשיו נעבור ל css:

    Code Snippet
    .simple-popup {
        display: none;
        font-family: Arial;
    }

        .simple-popup .simple-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .simple-popup .simple-popup-body {
            position: fixed;
            top: calc(50% – 178.5px);
            left: calc(50% – 283px);
            z-index: 2;
            background-color: white;
            min-height: 272px;
            width: 566px;
        }

    בקטע הראשון אני מסתיר את הפופאפ (שימו לב שבזמן הפיתוח מומלץ להגדיר display: block ורק בסוף לשנות ל none כדי שתוכלו לפתח ולראות את השינויים ללא לחיצות מעיקות…).

    הקטע שלאחריו מגדיר את כיסוי הרקע  position: fixed – יגרום לאלמנט להישאר מוצמד למקומו במסך גם אם גוללים את הדף.

    המאפיינים הבאים (top, left) יגדירו את המיקום בפינה השמאלית עליונה.

    המאפיין z-index חיוני במקרה של כמה אלמנטים שהם fixed (כמו אצלנו) שנמצאים באותו מיקום במסך, הוא קובע מי יהיה בשכבה בעליונה ומי יבוא כשכבה מתחתיו,  כאשר אינקס גבוה יותר = שכבה עליונה יותר (במקרה שלנו שאני יודע שיש לי רק שני אלמנטים כאלו אני יכול בשקט לתת לרקע השחור 0 ולפופא שיבוא מעליו 1 וזה מספיק, באתרים מורכבים כדאי לוודא שאין אלמנט אחר שהאינדקס שלו לא יותר גבוה)

    לאחר מכן אנו מגדירים לו גובה ורוחב – על פני כל המסך, וצבע רקע שחור עם שקיפות של 0.7. (במקום לתת צבע רקע בנפרד ולתת opacity בנפרד אני מעדיף להשתמש בrgba שהיא פונקציה שמתפקדת בדיוק כמו rgb ובנוסף מקבלת פרמטר רביעי שמהווה את השקיפות של האלמנט בטווח שבין 0.0 ל 1)

    הקטע השלישי מגדיר את הפופאפ עצמו – בשורה הראשונה ה position כמובן יהיה fixed,  לאחר מכן נגדיר את ה top וה left באמצעות הפונקציה calc להיות בדיוק במרכז המסך, החישוב שבהגדרת top הוא 50% מגובה המסך בהפחתת בדיוק 50% מגובה הפופאפ/ ואותו הדבר לגבי ה left c=בהתאמה.

    בהמשך נגדיר את ה z-index מעל לרקע השחור, נגדיר את צבע הרקע ללבן ואת הגובה והרוחב הרצויים.

    עד כאן ההגדרות החשובות של העיצוב שנוגעות לתשתית של הפופאפ – את שאר הגדרות העיצוב של פנים הפופאפ אביא בהמשך אך ללא הסבר מאחר וסביר שתרצו לעצב אותו לפי צרכיכם והבנתכם…

    כעת מה שנותר זה לראות את הפונקציה toggleElemById

    Code Snippet
    <script>
        function toggleElemById(id) {
            $(‘#’ + id).toggle();
        }
    </script>

    השתמשתי כאן ב toggle של JQuery שבודקת האם אלמנט מוצג או מוסתר והופכת את מצבו.

    והנה לפניכם הקוד המלא של הדף כולל יתר הגדרות ה css:

    Code Snippet
    <!DOCTYPE html>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <title></title>

        <style>
            .simple-popup {
                display: none;
                font-family: Arial;
            }

                .simple-popup .simple-popup-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 0;
                    height: 100%;
                    width: 100%;
                    background-color: rgba(0, 0, 0, 0.7);
                }

                .simple-popup .simple-popup-body {
                    position: fixed;
                    top: calc(50% – 178.5px);
                    left: calc(50% – 283px);
                    z-index: 2;
                    background-color: white;
                    min-height: 272px;
                    width: 566px;
                }

                    .simple-popup .simple-popup-body .simple-popup-header {
                        height: 50px;
                        width: 100%;
                        border-bottom: 1px solid #bdbdbe;
                        text-align: center;
                    }

                        .simple-popup .simple-popup-body .simple-popup-header h2 {
                            font-size: 20px;
                            line-height: 50px;
                            height: 50px;
                            margin: 0;
                        }

                        .simple-popup .simple-popup-body .simple-popup-header span {
                            position: absolute;
                            top: 8px;
                            right: 18px;
                            color: #bdbdbe;
                            font-size: 18px;
                            cursor: pointer;
                        }

                    .simple-popup .simple-popup-body .simple-popup-message {
                        min-height: 83px;
                        width: 450px;
                        margin: auto;
                        margin-top: 31px;
                        text-align: center;
                        color: gray;
                        font-size: 16px;
                    }

                    .simple-popup .simple-popup-body .simple-popup-action {
                        margin-top: 32px;
                        text-align: center;
                    }

                        .simple-popup .simple-popup-body .simple-popup-action input {
                            height: 40px;
                            width: 148px;
                            border: none;
                            font-weight: bold;
                            background-color: #ffce4b;
                        }
        </style>

        <script src=”jquery-1.11.3.min.js”></script>

        <script>
            function toggleElemById(id) {
                $(‘#’ + id).toggle();
            }
        </script>

    </head>
    <body>
        <input type=”button” value=”Show popup” onclick=”toggleElemById(‘simple-popup’)“ />

        <div class=”simple-popup” id=”simple-popup”>
            <div onclick=”toggleElemById(‘simple-popup’)“ class=”simple-popup-overlay”></div>
            <div class=”simple-popup-body”>
                <div class=”simple-popup-header”>
                    <h2>Title Here</h2>
                    <span onclick =”toggleElemById(‘simple-popup’)“>x</span>
                </div>
                <div class=”simple-popup-message”>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc metus nibh
                    cursus etrutrum at, semper nec magna.Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Nunc metus nibh, cursus etrutrum at,
                    semper nec magna.
                </div>
                <div class=”simple-popup-action”>
                    <input type=”button” value=”Action Button” onclick=”toggleElemById(‘simple-popup’)“ />
                </div>
            </div>
        </div>
    </body>
    </html>

    עד כאן להפעם, במידה ומשהו לא מובן או שסתם אם בא לכם לפרגן אשמח לתגובתכם כאן למטה סמיילי

    חיפוש

    פוסטים אחרונים

    Import files from git using CSharp
    MVC Actions and Object Oriented
    Upload file using angularjs with some data

    תגיות

    הרב דוטנט

    החברה מספקת שירותי ייעוץ פיתוח והדרכה.

    מפתחי החברה עומדים בחזית הטכנולוגיה, חלק גדול מזמן העבודה מושקע בלמידה על הטכנולוגיות החדשות, אנחנו רואים במפתחים שלנו את מהות החברה, אם אתם רוצים לקבל שירות בין אם זה ייעוץ בין אם תרצו שנפתח עבורכם, וכמובן אם אתם רוצים ללמוד, אתם מוזמנים לפנות אלינו.

    פוסטים אחרונים

    דף הבית

    צור קשר

    רבי שמעון בן שטח 8
    אלעד, ישראל
    טלפון: 052-624-9139
    פקס: 077-444-7864
    Email: info@haravdotnet.co.il