asked on

Jquery Modal Takeover Causing problems in IE

Hello,

I am having the most difficult time with a jquery modal takeover - it looks and works great in Chrome and Firefox, however when I view it in IE7+ the background of the modal turns transparent when the modal complete the load.

Take a look at it here: http://www.thelocalgolfer.com/index_takeover.php

Please note that if you submit the form a cookie will be placed in your browser so it does not appear again. If you clear your cookies the takeover will appear again.

I have included my css below (which is included at the bottom of style_div.css)

/* for takeover modal */
.clear{
clear:both;
}

#box{
position:fixed;
top:0px;
 left:0px;
 opacity:0.6;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  display:none;
   background: #ffffff;
    width:100%; 
	height:100%;
	
	}
	
#mid{
position: fixed;
margin:auto; 
width:470px;
min-height:207px;
top:150px;
	text-align:center; 
	color:#FFF;
	 font-size:18px;
	  font-family:Arial, Helvetica, sans-serif;

	background:url(images/cont.png) repeat-x; 
-moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 0px 0px 100px #000; /* Firefox */
  -webkit-box-shadow: 0px 0px 100px #000; /* Safari and Chrome */
  box-shadow: 0px 0px 100px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
  position: absolute;
	  }
	  
	  .round {
     -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -khtml-border-radius: 12px;
    border-radius: 12px;
}
#mid_head{ 
text-align:left; 
padding-left:10px;
width:460px; 
height:27px;
font-size:14px;
font-weight:bold;
  padding-top:7px;
   color:#666666;
   border-bottom:#999999 1px solid;
  
   
   
  }
   #mid_head img{float:right; cursor:pointer;}
#mid_contain{
 border-top:0px; 
  width:470px; 
  height:180px;
	 color:#666666;
	 font-family:sans-serif;
	 font-weight:bold;

  }

#mid_contain img{border:none;
float:right;
margin-right:15px;
margin-bottom:0px;
cursor:pointer;

}

.input_b{
  height:25px;
  width:220px;
  border: #B6BEBA 1px solid;
  font-family:Arial, Helvetica, sans-serif;
  font-size:17px;
  font-weight:700;
  color:#666666;
  margin-bottom:4px;
  background:#EFEFEF;
  
  }
  
.input_b:focus{outline: #F0A457 1px solid;}
  
.submit_btn{background:#666;
 width:160px;
 text-align:center;
  height:30px;
  border:none;
    color:#ffffff;
	 font-size:14px;
	 font-weight:bold;
	  cursor:pointer;

	  -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}
  
  .log{
  float:left;
  text-align:left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:100;
  margin-left:10px;
  width:100%;
  margin-top:15px;
  }
  .log a{
  color:#666666;
  float:lef}
  
  .log img
  {
  float:right;
  }
  
.error{ height:15px; width:200px; text-align:center; margin:auto;}
 .error span{ color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; margin:auto; width:200px;}

Open in new window

mrh14852

What file has your dialog code in it?

Have you tried setting a high z-index in the dialog config?

$(".selector").dialog({
zIndex: 3999
});

Also jQuery modal dialogs are known to have overlay issues in IE sometimes requiring the bgiframe plugin and chain it to the dialog open function.

neilsav

ASKER

My dialog code is in pop_up.php

Code pasted below - not sure where to place your zindex code.

<div style="" id="box">
</div>
<div id="mid">
<div style="" id="mid_head">Sign up to find great courses to play</div>
<div style="" id="mid_contain">
<div class="error"></div>

<table width="80%" align="center">
<tr><td style="text-align:right;" align="left">Email : </td><td><input type="text" class="input_b" name="email" id="email" /></td></tr>
<tr><td style="text-align:right;" align="left">ZIP Code : </td><td><input type="text" class="input_b" name="zip" id="zip" /></td></tr>
<tr><td><div id="loading" style="display:none;"><img src="images/loading.gif" width="80" height="13" /></div></td><td><button class="submit_btn" onclick="store();">Find great courses</button></td></tr>
</table>

<div class="log">Already a member? <a href="http://www.thelocalgolfer.com/golf-forum/ucp.php?mode=login">Login here</a><img src="images/deleteButton.png" hspace="0" onclick="remove_box();" /></div>

<div class="clear"></div>

</div> 
<div class="clear"></div>
</div>




</body>
<script type="text/javascript">
var page='store.php';


$(document).ready(function(){
$('#box').click(function(){
remove_box();
});

	$('#box').show();
	$('#mid').show();
	var full_w=$(window).width();
	full_w=full_w/2;
	full_w=full_w-220;
	$('#mid').css("left" , full_w+"px");
	$("#email").focus();

});
function is_int(input){
  
 return !isNaN(input)&&parseInt(input)==input;
  }
function store()
{
$("#loading").show();
var email = $("#email").val();
var zip = $("#zip").val();
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if(filter.test(email)==false){$("#loading").hide();$("#email").focus();$(".error").html("<span>Not a valid E-mail.</span>");return false;}
if(email==''){$("#loading").hide();$("#email").focus();return false;}
if(zip==''){$("#loading").hide();$("#zip").focus();return false;}
if(!is_int(zip)){$("#loading").hide();$("#zip").focus();$(".error").html("<span>ZIP Code must be an integer.</span>");return false;}
$.ajax({
type: "POST",
data: "email="+email+"&zip="+zip,
url: page, 
dataType: "html",
success:function(data){ 
$("#loading").hide();
$('#mid_contain').html(data);
setTimeout("remove_box()" , 800);
}});

}


function remove_box()
{
    $('#box').fadeOut(300);
    $('#mid').fadeOut(300);
}

</script>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

mrh14852

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

neilsav

ASKER

You are the man!