# Lightbox: Loading dock when link is clicked

**URL:** https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710
**Category:** web dev
**Created:** [June 29, 2008, 4:52am UTC](https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710 "2008-06-29T04:52:10Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![stewartlee](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@stewartlee](https://forum.kirupa.com/u/stewartlee)
#### Post date: [June 29, 2008, 4:52am UTC](https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710/1 "2008-06-29T04:52:10Z")

</div>

Hello, I’m looking for the script they use on [netrasofttech.com](http://netrasofttech.com), when a link on that site is clicked, a lightbox appears in the far right hand corner saying loading, I’ve tried getting the js file and using it for myself but it doesn’t work. I’ve tried searching for this script, but I couldn’t find one.

Any ideas?

---

<div class="post-metadata">

### Author: ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)
#### Post date: [June 29, 2008, 5:38am UTC](https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710/2 "2008-06-29T05:38:50Z")

</div>

This is the easiest example I could come up with. The authors used the AJAX controls kit for [ASP.NET](http://ASP.NET) though to accomplish this. My version does not. Let me know if you have questions.

```auto
<html>
	<head>
		<title>Loading</title>
		<style type="text/css">
			.dockclass{
				margin-top:5px;
				width:100px;
				height:40px;
				border:1px solid #ccc;
				padding:15px;
				padding-bottom:8px;
				position:absolute;
				right: 10px;
				top: 0px;
				z-index: 111;
			}
		</style>
		<script type="text/javascript">
			var load;
			var timer;
			function loader()
			{
				//Show the element
				load = document.getElementById('UpdateProgress1');
				load.style.display = "block";
				//Just sets a timer for how long to show the element
				setTimeout("remLoader()", 2000);
			}

			function remLoader()
			{
				//Load the content and remove the element
				document.getElementById('more').innerHTML = "<strong>Some fake, ajax seeming content</strong>";
				load.style.display = "none";
			}
		</script>
	</head>
	<body>
		<!--Begin Loading Box -->
		<div id="UpdateProgress1" style="display:none;">
		    <div id="loader" class="dockclass" style="opacity:0.4;filter:alpha(opacity=40)"> 
		        <img src="http://netrasofttech.com/images/loading3.gif" alt=" " />&nbsp; <strong>Loading...</strong>
		    </div>
		</div>
		<!-- End of Loading Box -->
		<br />
		<h2>This is my title</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio. Morbi eu nisl. Praesent feugiat, dui vel fermentum condimentum, neque ipsum tincidunt eros, sed euismod velit lectus in metus. Quisque in diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
		<a href="#" onclick="loader();">Load More Content...</a>
		<h2>Additional content to be loaded</h2>
		<div id="more"></div>
	</body>
</html>

```

---

<div class="post-metadata">

### Author: ![stewartlee](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@stewartlee](https://forum.kirupa.com/u/stewartlee)
#### Post date: [June 29, 2008, 10:07am UTC](https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710/3 "2008-06-29T10:07:58Z")

</div>

That is excellent, thank you very much.

---

<div class="post-metadata">

### Author: ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)
#### Post date: [June 29, 2008, 10:11pm UTC](https://forum.kirupa.com/t/lightbox-loading-dock-when-link-is-clicked/264710/4 "2008-06-29T22:11:26Z")

</div>

No problem Stewart,

I forgot to mention that this is not lightbox, or even lightbox-ish. Lightbox creates a modal window by appending divs to a document and setting attributes to them to make them fit the lightbox css. My method simply is hiding and showing a div (this is the method the site you referenced uses). Just thought it was worth mentioning for clarity’s sake.

peace.
