With respect, I've now got it to post Ajax no problem. But it uses a JS file, and then a PHP file.
To change that to something else (like you have done) maybe work nice, but fact is - mine's working and I don't want to break it now.
When you click the button, I've got it to go dark and a DIV to appear, in which I can put my HTML, BUT, it's not filling the entire scrollable browser. It's only filling what's on screen.
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/js_sendtofriend.js"></script>
<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
</script>
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:100;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
<div id='form$row->id'>
<form>
<input type='hidden' id='email' name='email' value='$row->id'>
<input type='hidden' id='prodid' name='prodid' value='$row->id'>
<input type='hidden' id='prodname' name='prodname' value='$row->title'>
<input type='button' id='submit' value='REQUEST SAMPLE' class='submitcart' onclick = \"document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'\"/>
</form>
</div>
The bigger issue is if you scroll down the page and choose "Request Sample", the dark area and DIV shown, still appears only at the very top - not in the middle of the screen where you are viewing it.