Ok, so I have spent a bit of time looking around on the forums and such to come up with a solution for this. I believe it is related to using the # (anchor link).
This is the code I am using to create my modals. Whatever modX is doing, it is not letting me open up that popup using the #?w=500 code. Any reason why? Is there anything I should be changing in my javascript to make this work?
BTW, I fixed the problem of it going to
http://site.com/#?w=500 instead of
http://site.com/page#?w=500 using the AnchorsAway plugin, but that doesn’t seem to help in this case.
<!--link-->
<a href="#?w=500" rel="popup_name" class="poplight">Learn More</a>
<!--content-->
<div id="popup_name" class="popup_block">
<h2>Turtle Power</h2>
<p>I <3 Turtles.</p>
</div>
<!--css-->
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
<!--javascript-->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$j('a.poplight[href^=#]').click(function() {
var popID = $j(this).attr('rel'); //Get Popup Name
var popURL = $j(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$j('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($j('#' + popID).height() + 80) / 2;
var popMargLeft = ($j('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$j('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$j('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$j('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$j('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$j('#fade , .popup_block').fadeOut(function() {
$j('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
It is from this site:
http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/
I really love how simple it is and use it all the time on websites, but this is the first time I am trying to use it in ModX.
