שלום לכולם,
יש לי בעיה ממש מוזרה, אני מנסה להציג 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>