Jump to content

Js Modal Help

driz

By driz
in JavaScript

Recommended Posts

driz Member

driz

Posted
Posted

I fixed the initial problems. What I need to do is build this HTML structure using the JS code below. I'm not sure how to create all the nested stuff using JS.

<div id="Modal"><div class="Content"><p>Sending Data ( <a href="java script:JS_Utils_HideModal();">cancel</a>)</p></div></div>

I also want it so that if the user clicks the cancel button then it not only hides the modal box, but stops the page!EDIT: I might also need to prevent multiples of the modal appearing, not sure if that is a possibility or not? This is not a lightbox or anything, just a simple panel that appears when the user submits some content to let them know the process is taking place.

<!DOCTYPE html><html>	<head>		<script type="text/javascript">				//----------------------------------------------------------------------		// Modal		//----------------------------------------------------------------------							function JS_Utils_BuildModal ()		{					var objModal = document.createElement("div");						objModal.setAttribute('id', 'Modal');					document.body.appendChild(objModal);						objModal.style.display = "none";		}				function JS_Utils_ShowModal ()		{			objModal = document.getElementById("Modal");			objModal.style.display = "block";						return true;		}				function JS_Utils_HideModal ()		{			if ( objModal ) objModal.style.display = "none";			// Need some extra functionality here that stops the page		}				//----------------------------------------------------------------------		//----------------------------------------------------------------------				</script>				<style type="text/css">		div#Modal { position: fixed; top: 0px; left: 0px; width: 100%; height: 200%; background: #333 url('overlay.png') repeat scroll;  }		div.ModalContent { -webkit-border-radius: 6px; margin: 200px auto 0px; background: #fff url('loading2.gif') center 20px no-repeat scroll; border: 3px solid #FFF; width: 200px; height: 90px; color: #999; position: relative; }		div.ModalContent span { display: block; position: absolute; top: 60px; left: 0px; width: 200px; text-align: center; }		* html div.Modal { position: absolute; height: 100%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale'); background: none; }		</style>	</head>		<body onload="JS_Utils_BuildModal();">			<a href="java script:JS_Utils_ShowModal();">Test Link</a>				</body></html>

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

A little detail, the line

		<a href="java script:JS_Utils_ShowModal();">Test Link</a>

doesn't work on browsers I'm using, I had to use 

		<a href="java script:JS_Utils_ShowModal();">Test Link</a>

instead (maybe this is a simple comment...). Also, I don't figure out what you mean with"... // Need some extra functionality here that stops the page...I also want it so that if the user clicks the cancel button then it not only hides the modal box, but stops the page!..."close the window? freeze the browser? Basically, the behavior you expect by "stops the page"

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Why build the dialog dynamically? You could hard-code it into your html and then just toggle its display property to make it visible. And then you can add your buttons and other widgets in the usual way.If you do end up needing multiple modals (seldom, I hope), instead of building them from scratch, use element.cloneNode to clone the whole modal, using the "deep" switch that clones the contents as well. https://developer.mozilla.org/En/DOM/Node.cloneNodeSounds a lot easier to me."Stops the page" -- What does that mean?

Link to comment
Share on other sites
driz Member

driz

Posted
  • Author
Posted

Hopefully this clear up some things:I want to build the modal dynamically because I want to call it into a page without having extra markup inside the page that may or may not be used. By page stop I mean stop the page from doing a postback so if a user submits a form which in turn calls the modal and then the user clicks the cancel button the modal it will hide the modal and then stop the postback on the page.What I'm needing to know with regards to the building part, is how to create a series of elements but have them nested within each other so like:

<div id="Modal"><div class="Content"><p>Sending Data ( <a href="java script:JS_Utils_HideModal();">cancel</a>)</p></div></div>

This is the ONE and ONLY modal box on the page by the way so I don't need to make clones of it etc.

Link to comment
Share on other sites
just2comment Newbie

just2comment

Posted
Posted

About the original post: maybe (I don't get every detail) this page contains something useful for you: http://javascript.about.com/library/blmodal.htmTwo other details:

  • I don't undestand why when writing "javascript" in <a href="java script:JS_Utils_ShowModal();">Test Link</a>or in
     <a href="java script:JS_Utils_ShowModal();">Test Link</a>

    it appears in these posts as "java script"... I get disappointed when editing my original post...

  • I'm not English language/culture native and I'm not involved in many forums, so I get confused with that of "shouting"... I mainly use e-mail and I understand that writing in capitals can be understood -depending on context, as something like yelling or emphasizing something, but no more than that, so I got lost on the last two posts. Anyway, don't worry about, it's just another thing I have to learn.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You use createNode and appendChild to create the structure:

var objModal = document.createElement("div");objModal.setAttribute('id', 'Modal');document.body.appendChild(objModal);

That's how you create the div, you can do the same thing to create the other nested elements and append them to the div or each other. You use document.createTextNode to add text (such as the text inside the link). You can also use an element's innerHTML property.You can use window.stop to duplicate the functionality of the browser's stop button.

Link to comment
Share on other sites
driz Member

driz

Posted
  • Author
Posted

This is what I ended up with in the end:

			function JS_Utils_BuildModal () 			{ 				var objModal   = document.createElement("div"); 				var objContent = document.createElement("div");				var objP	   = document.createElement("p");				objModal.setAttribute('id', 'Modal');				objContent.className = 'ModalContent';				objP.innerHTML = '<img src="loader.gif" alt="loading" /><br /><br />please wait or <a href="java script:JS_Utils_HideModal();">cancel</a>';				objModal.appendChild(objContent);				objContent.appendChild(objP); 				document.body.appendChild(objModal);								objModal.style.display = "none";			}			function JS_Utils_ShowModal ()			{				objModal = document.getElementById("Modal");				objModal.style.display = "block";			}			function JS_Utils_HideModal ()			{				if ( objModal ) objModal.style.display = "none";								window.stop();			}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...