Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ajax modal box help

    hello, bellow is a simple total javascript alert box code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    #CustomAlert {
    visibility: hidden;
    position: absolute;
    z-index: 999;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 50px;
    border-style: groove;
    border-width: 5px;
    border-color: #FFFFFF;
    cursor: default;
    filter: alpha(opacity=90);
    background-color: silver;
    text-align: center;
    }
    #CustomAlertSampleokButton {
    background-color: silver;
    font-color: #000000;
    font-size: 9pt;
    font-family: arial;
    width: 70px;
    height: 20px; 
    }
    #CustomAlertTitle {
    background-color: dimgray;
    font-family: arial;
    font-size: 9pt;
    color: #FFFFFF;
    font-weight: bold;
    }
    #CustomAlertMessage {
    font-family: arial;
    font-size: 11pt;
    color: #000000;
    font-weight: normal;
    }
    </style>
    <script>
    var CUSTOM_ALERT = function(){//Namespace pattern
    	var alertBox = null, titleEl = null, messageEl = null;
    	return {
    		hide : function(){
    			alertBox.style.visibility = 'hidden';
    		},
    		alert : function(aTitle, aMessage){
    			if(!alertBox) alertBox = document.getElementById("CustomAlert");
    			if(!titleEl) titleEl = document.getElementById("CustomAlertTitle");
    			if(!messageEl) messageEl = document.getElementById("CustomAlertMessage");
    			titleEl.innerHTML = aTitle;
    			messageEl.innerHTML = aMessage;
    			thisText = aMessage.length;
    			if (aTitle.length > aMessage.length){ thisText = aTitle.length;}
    			aWidth = Math.min(Math.max(thisText*5+80, 150), 350);
    			aHeight = (thisText>610) ? 290 : (thisText>550) ? 270 : (thisText > 490) ? 250 : (thisText > 420) ? 230 : (thisText > 360) ? 210 : (thisText > 300) ? 190 : (thisText > 240) ? 170 : (thisText > 180) ? 150 : (thisText > 120) ? 130 : (thisText > 60)? 110 : 100;
    			alertBox.style.width = aWidth + 'px';
    			alertBox.style.height = aHeight + 'px';
    			var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    			var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    			var hScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
    			var vScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    			alertBox.style.left = hScroll + (left - aWidth)/2 + 'px';
    			alertBox.style.top =  vScroll + (top - aHeight)/2 + 'px';
    			alertBox.style.visibility = 'visible';
    		}
    	};
    }();
    </script>
    </head>
     
    <body>
    <div id="CustomAlert">
    	<table border="0" width="100%" height="100%">
    	<tr height="5"><td colspan="4" id="CustomAlertTitle"></td></tr>
    	<tr height="5"><td width="5"></td></tr>
    	<tr><td width="5"></td><td width="20" align="left"><img src="alert.gif"></td><td align="center" id="CustomAlertMessage"></td><td width="5"></td></tr>
    	<tr height="5"><td width="5"></td></tr>
    	<tr><td width="5"></td><td colspan="2" align="center"><input type="button" value="OK" onClick="CUSTOM_ALERT.hide();" id="CustomAlertSampleokButton"></td><td width="5"></td></tr>
    	<tr height="5"><td width="5"></td></tr>
    	</table>
    </div>
     
    <center>
     
    <input type="button" value="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">
    <br><br>
    <input type="button" value="Click Here For A More Attractive Alert" onClick="CUSTOM_ALERT.alert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">
    </center>
    </body>
    </html>

    This code is ok but I want to use this box like a message form for private messaging. I want to add some extra feature in it like:

    1. adding a "Subject" and "Message" input field in it.
    2. creating button "Send" and "Cancel".
    3. putting a [x] at top right side to close the box.
    4. fadeIn() n fadeOut() function to make page fade when it opens + slide toggle open.
    5. a progress bar when it is pressed "Send" button.
    6. If the message content is bigger than 2048 characters if outputs the warning message on top.

    I need this code very much. someone please code this or tell me the way I can do those.
    Thanks.
    Last edited by anderson333; 07-01-2011 at 08:24 AM. Reason: clearing


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •