בעיה | קוד Jquery - הוסטס

danielkh · 22-06-12, 11:00

שלום לכולם,

יש לי בעיה ממש מוזרה, אני מנסה להציג Popup שמאחוריו יוצג הרקע בשחור(הכל בjquery ולא פופאפ רגיל בhtml).
משום מה הPopup בלי הגדרה של הרקע מאחורה עובד(ראו קוד מצורף). וכאשר מגדירים את הDiv של הרקע בקוד ובפונקציה הPopup לא מופיע(ראו קוד מצורף פשוט תורידו את ההערות).
אשמח לקבל עזרה בהקדם תודה לכולם.

קוד:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>


<!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 runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">


        $(document).ready(function () {


            $("#link").click(function () {
                loadPop();
                center();
            });


        });


        function loadPop() {


//            $("#backgroundPop").css({
//                "opacity": "0.5",
//                "background-color": "Black"
//            });


//            $("#backgroundPop").fadeIn('slow');
            $("#popup").fadeIn('slow');
            
        }


        function center() {


            var windowWidth = document.documentElement.clientWidth;
            var windowheight = document.documentElement.clientHeight;
            var popupWidth = $("#popup").width();
            var popupHeight = $("#popup").height();


            $("#popup").css({
                "position": "absolute",
                "top": 100,
                "left": windowWidth / 2 - popupWidth / 2
            });


//                 $("#backgroundPop").css({
//                "height": windowheight
//            });
        }
    </script>
</head>
<body>
    
    <form runat="server">
    <div id="div1" style="background-color:Red; width: 100%; height:300px;">
    </div>
    <div id="div2" style="background-color:yellow; width: 100%; height:300px;">
    <span id="link">דוגמהה</span>
    </div>
    <div id="div3" style="background-color:green; width: 100%; height:300px;">
    </div>
    <div id="popup" style="display: none; background-color: Black; color: White; height:300px; width:300px; z-index:1">
    kgjg
    </div>
    </form>
    <%--<div id="backgroundPop" style="height: 100%; width: 100%; position:fixed; top:0; left:0;">
    </div>--%>
</body>
</html>

Haimz · 22-06-12, 14:19

הטעות שלך הייתה שהBACKGROUND נמצא על הטקסט, מה שיצר מצב שאתה חשבת שלחצת על הטקסט אבל בעצם לחצת על הרקע,
תיתן לרקע display none , כך:

קוד:

<div id="backgroundPop" style="display:none;height: 100%; width: 100%; position:fixed; top:0; left:0;">
    </div>

ולפונקצייה loadpop תוסיף:

קוד:

$("#backgroundPop").fadeIn('slow');

דוגמה: http://pastebin.me/9cb729b698f5239e99aac66dd5009ff6


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

22-06-12, 14:19	# 2
Haimz חבר וותיק מיני פרופיל תאריך הצטרפות: Sep 2010 הודעות: 1,221	הטעות שלך הייתה שהBACKGROUND נמצא על הטקסט, מה שיצר מצב שאתה חשבת שלחצת על הטקסט אבל בעצם לחצת על הרקע, תיתן לרקע display none , כך: קוד: <div id="backgroundPop" style="display:none;height: 100%; width: 100%; position:fixed; top:0; left:0;"> </div> ולפונקצייה loadpop תוסיף: קוד: $("#backgroundPop").fadeIn('slow'); דוגמה: http://pastebin.me/9cb729b698f5239e99aac66dd5009ff6

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)