WP v3.2.1
Using a modal window that opens on page load, adding a form only displays in Firefox. The modal window works but form is not displayed. I’m hoping this is not a wp error but a css error in which case this can be moved to the css forum.
I am attempting to insert this on a page but should still work in a post.
Link to test page
css
#fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .70;
z-index: 9999;
}
.popup_block{
display: none;
background:url(images/pop-ad.png) no-repeat;
/*height:400px; */
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
background:url(images/close_pop.png) no-repeat;
float:right;
width:50px;
height:50px;
margin:-25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
.popup_block .poplight #myform {
float:right;
margin:125px 0 20px 0;
width:150px;
padding:0;
font-size:11px;
}
.popup_block .poplight #myform label {
width:150px;
margin:0;
color:#333;
}
.popup_block .poplight #myform input {
width:150px;
margin:0 0 3px 0;
}
.popup_block #myform select {
width:155px;
}
html
<div id="popup3" class="popup_block">
<a href="#?w=600" rel="popup3" class="poplight clearfix">
<div id="myform">
<script type="text/javascript" src="http://www1.moon-ray.com/genf.php?f=p2c2618f115"></script>
</div>
</a></div>
pop.js
$(document).ready(function(){
$.fn.popOpen = function(){
popID = $(this).attr('rel'); //Get Popup Name
popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
query= popURL.split('?');
dim= query[1].split('&');
popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 2;
var popMargLeft = ($('#' + popID).width() + 0) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=70)'}).fadeIn(); //Fade in the fade layer
};
$('a.poplight[href=#?w=600]').popOpen(); //Run popOpen function once on load
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(); //fade them both out
$('#fade').remove();
return false;
});
popOpen
});