I have mentioned below a link which tries to submit a cart form to javascript. The JS triggers a lightbox to display the cart information. But I am facing the issue of lightbox closing down automatically. It would be helpful if I get any suggestions to resolve it.
<p>This is the main content. To display a lightbox click <a id="cart" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.displa y='block'"> <button>Submit</button></a></p>
the code provided doesn't do anything abnormal, you need to supply more code for us to figure it out. you probably have the link executing the code that hides the box in the wrong place, or it may be on the outer element and when you click the inner element it's bubbling up to the uter element whic detects the click and closes it
Thanks for the reply. I have given the full code below. I hope it will help to identify the issue.
I changed the code a bit.
Now finding the issue of triggering two events on one link click. The click action should trigger light box display. The lightbox the should contains the iframe that displays submitted values from the form.
<!DOCTYPE>
<html>
<head>
<title>
Simple lightBox effect with css and javascript
</title>
<style>
@CHARSET "ISO-8859-1";
/* This is a style of dim effect onClick on Register or Log in button - it's the transparent background*/
.black_overlay1, .black_overlay2{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
/* This is a style for log in and registration form */
.white_box {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid #84679f;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
showPage1();
}
);
// Change the ww number to yours //
var baseUrl = "http://ww7.aitsafe.com/cf/review.cfm?";
function showPage1 () {
// Change the showPage to your userid //
showPage (document.getElementById ("userid=60400426"));
}
</script>
<script type="text/javascript">
function showPage(el) {
var div = document.getElementById ("light1");
//alert(baseUrl);
//alert(el.id);
page = baseUrl + el.id;
//alert(page);
// Change the size of the frame //
alert(page);
div.innerHTML = "<iframe src ='"+ page +"' width='800px' height='450px' scrolling='auto'>";
//event.stopPropagation();
//
your onclicks should call a function instead of having so many statements chained together, for example <a onclick="toggleLightBox()" href="javascript:void(0)">, and you really should have just one onclick within the div or alternately on the anchor tag that is wrapping the div. several of the id you are trying to access light1, light2, cart and fade don't appear int he html code either.
but your real problem seems to be with this part of the code as you have the #fade div wrapped in an anchor tag which triggers an onclick, and the div itself also has an onclick in it, so you may be triggering the outer onclick at the same time you click on the div which also has an onclick, you also have several space characters within the names:
it seems like you simply have to many onclicks firing all at once,
so i suggest you create a showCart() and hideCart() functions,
or a toggleCart() function and put that in just one of the onclicks.
Reply With Quote
Bookmarks