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

LVL 1
neilsavAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mrh14852Commented:
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.
0
neilsavAuthor Commented:
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

0
mrh14852Commented:
My fault.  When you said jQuery modal I assumed you were using a jQuery UI dialog modal.

Try adding this to your CSS for #mid

z-index: 9000;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
neilsavAuthor Commented:
You are the man!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.