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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get a Confirm alert BOx with "yes", "no" and "cancel"

    hi,

    can i get a Confirm alert BOx with "yes", "no" and "cancel"
    if i just use confirm then il get only yes or no..., how can i get cancel in it.

    thnx
    murali

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    You would have to write your own since you can not change the browser message boxes.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's the basic idea


    PHP Code:
    <script type="text/javascript">

    function 
    showHide(layerid){
    if (
    document.getElementById(layerid).style.visibility != "hidden"){
    document.getElementById(layerid).style.visibility "hidden"
    }
    else{
    document.getElementById(layerid).style.visibility "visible"
    }
    }

    function 
    test(){

    alert("This would be your function to run")

    }
    </script>

    <a href="#null" onclick="showHide('box2')"><b>Confirm Alert</b></a>

    <DIV id="box2" style="position:absolute;left:350;top:150; width:250;height:100px;color:#FFFFFF;border:2px solid #808080; background:#d8cfc8;visibility:hidden;text-align:center">

    <div style="height:18;font-size:12;text-align:left">Your Site Name</div>

    <div style="color:black;height:50px">Are You Sure You Really Want To?</div>

    <button style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="test();showHide('box2')">Yes</button>
    <button style="width:74;height:20;font-size:10;border:1px outset #ffffff;" onclick="showHide('box2')">No</button>
    </DIV> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Here is another example.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Custom Confirm Box</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.85em;
    }
    #cover {
    position:fixed;
    z-index:0;
    width:100%;
    height:100%;
    left:0;
    top:0;
    display:none;
    background:#CCC;
    opacity:0.1;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    -khtml-opacity:0.1;
    }
    #alertbox {
    display:none;
    border:1px solid #000;
    background:#09F;
    text-align:center;
    position:absolute;
    }
    #close {
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    }
    #alerttitle {
    background:#FFF;
    border-bottom:1px solid #000;
    padding:3px;
    font-size:120%;
    text-align:left;
    position:relative;
    }
    #alertcontent {
    padding:10px;
    }
    #alertbox input {
    padding:2px;
    border:1px solid #000;
    background:#FFF;
    margin-bottom:10px;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    }
    #cover {
    position:absolute;
    }
    </style>
    <![endif]-->
    <script type="text/javascript">
    function callAlert(title,text)
    {
    	var el = document.getElementById('alertbox');
    	document.getElementById('alerttitle').getElementsByTagName('span')[0].firstChild.nodeValue = title;
    	document.getElementById('alertcontent').firstChild.nodeValue = text;
    	document.getElementById('cover').style.display = 'block';
    	el.style.display = 'block';
    	el.style.top = (f_clientHeight() - el.offsetHeight) / 2 + 'px';
    	el.style.left = (f_clientWidth() - el.offsetWidth) / 2 + 'px';
    	document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    	document.getElementsByTagName('html')[0].style.overflow = 'hidden';
    	return false;
    }
    function closeIt(val)
    {
    	document.getElementById('alertbox').style.display = 'none';
    	document.getElementById('cover').style.display = 'none';
    	document.getElementsByTagName('body')[0].style.overflow = 'auto';
    	document.getElementsByTagName('html')[0].style.overflow = 'auto';
    	if(val == true) window.location = document.getElementById('link').getAttribute('href');
    }
    function f_clientWidth()
    {
    	return f_filterResults
    	(
    		window.innerWidth ? window.innerWidth : 0,
    		document.documentElement ? document.documentElement.clientWidth : 0,
    		document.body ? document.body.clientWidth : 0
    	);
    }
    function f_clientHeight()
    {
    	return f_filterResults
    	(
    		window.innerHeight ? window.innerHeight : 0,
    		document.documentElement ? document.documentElement.clientHeight : 0,
    		document.body ? document.body.clientHeight : 0
    	);
    }
    function f_filterResults(n_win, n_docel, n_body)
    {
    	var n_result = n_win ? n_win : 0;
    	if (n_docel && (!n_result || (n_result > n_docel)))
    		n_result = n_docel;
    	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
    }
    </script>
    </head>
    <body>
    <div id="content">
    	<a href="http://www.yahoo.com" onclick="return callAlert('&nbsp;','Do you wish to continue to '+this.href+'?');" id="link">Click here to call custom alert and decide if you want to go to specified url.</a><br><br>
    	<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus elementum leo ut quam. Integer fermentum, massa nec egestas varius, turpis metus hendrerit dolor, vitae accumsan leo arcu a sapien. Mauris tincidunt, lorem nec luctus vulputate, magna urna facilisis mauris, eleifend tempus augue nunc non tellus. Vivamus ut justo in turpis tristique condimentum. Mauris malesuada varius nunc. Praesent aliquam, dolor eu volutpat tempor, pede mauris pretium orci, nec lobortis diam elit quis dolor. Donec est urna, auctor sit amet, accumsan eget, congue blandit, ligula. Vivamus dapibus placerat ligula. Sed egestas. Proin faucibus dapibus urna. Donec condimentum erat sit amet augue. Aliquam erat volutpat. Etiam vulputate lacinia orci. Quisque vehicula purus sodales velit. </p>
    	<p> Nullam ac elit eu odio posuere laoreet. Vivamus nulla sapien, venenatis non, hendrerit sed, pretium a, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eget magna quis purus euismod aliquet. Maecenas commodo, elit at varius venenatis, velit purus bibendum dolor, eget mattis enim libero et ligula. Sed aliquam adipiscing neque. Pellentesque eu elit eget arcu rhoncus rutrum. Donec id ligula sed sem hendrerit pretium. Suspendisse potenti. Vestibulum suscipit gravida sapien. Integer a elit ac ligula tincidunt convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consequat ipsum vitae massa. Fusce blandit. Curabitur auctor. Fusce et sapien. Fusce eget nisi sit amet tellus mattis tempor. Mauris felis. Nunc purus. In blandit. </p>
    	<p> Phasellus mi dui, sagittis id, tempus at, ultricies ac, nibh. Curabitur vitae pede sit amet magna pellentesque malesuada. Vivamus eget magna eu massa ultrices venenatis. Donec a ligula. Nulla adipiscing scelerisque enim. Vestibulum nunc massa, fringilla quis, venenatis sed, elementum vel, metus. Sed molestie, ante eget interdum tincidunt, odio sapien placerat justo, viverra molestie enim dolor a elit. Duis in odio id justo sodales euismod. Ut tincidunt nunc fermentum dolor. Suspendisse consectetuer. Curabitur orci. </p>
    	<p> Suspendisse urna. Vestibulum bibendum venenatis sapien. Mauris id dui. In id ligula eu nisi varius dapibus. Ut semper. Maecenas id ligula sed massa vestibulum varius. Vivamus euismod eros ut velit. Proin ullamcorper mi ac enim. Ut auctor, ligula at placerat aliquam, orci ligula volutpat nulla, sit amet bibendum massa risus vitae sapien. Integer id lacus non augue faucibus accumsan. </p>
    	<p> Nunc posuere, dolor sed pellentesque ornare, leo elit cursus magna, vel sodales augue eros sed felis. Etiam feugiat ligula nec ligula. Phasellus ipsum purus, semper quis, consectetuer sed, facilisis in, mauris. Praesent eu lacus. In quis purus ut sem sodales volutpat. Curabitur hendrerit, tellus in placerat nonummy, lorem sapien ultricies tortor, a volutpat purus lectus non mi. Sed nec augue. In tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sit amet nulla. Proin auctor placerat mi. Sed ac nisl ut risus semper pretium. </p>
    	<p> Maecenas vestibulum volutpat justo. Vestibulum sed nibh quis neque ullamcorper dictum. Nam quis erat at augue pellentesque dignissim. Vestibulum venenatis ultrices mi. Aenean pulvinar imperdiet ante. Maecenas nunc turpis, convallis in, porttitor sed, lobortis viverra, velit. Praesent rutrum, sapien lobortis blandit placerat, lacus ligula accumsan eros, non egestas purus mi quis diam. Donec luctus posuere est. Ut tempor consectetuer libero. Aenean lobortis odio ut lacus. Curabitur dignissim metus quis velit. Sed condimentum. Curabitur pharetra risus et nunc. Duis aliquam. </p>
    	<p> Suspendisse condimentum, nisl quis venenatis facilisis, justo magna dignissim nisl, quis mattis nisi orci eget orci. Pellentesque sed purus vel nulla vulputate fermentum. Proin interdum, turpis cursus vulputate ultrices, massa neque euismod pede, ut pellentesque dolor orci dignissim pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam rutrum massa. Suspendisse risus pede, cursus eu, tincidunt eget, fermentum a, orci. Maecenas libero. Proin commodo laoreet nisi. Aliquam vitae enim. Sed fringilla consectetuer eros. Aenean nec libero eu quam laoreet eleifend. Donec congue, nisl et ultrices congue, magna dolor porttitor mauris, id interdum risus est sed pede. Donec laoreet pede ac purus. Nunc arcu erat, aliquam et, luctus ac, facilisis ut, dolor. Nulla facilisi. Integer mi nulla, dictum sed, molestie ac, rhoncus non, risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin dolor velit, cursus non, posuere sed, molestie in, massa. Proin ut nisi. Ut aliquet sodales metus. </p>
    	<p> Donec eros. Donec blandit. In hac habitasse platea dictumst. Morbi ac purus sit amet ante facilisis rutrum. Aenean ultricies ante eu augue. Maecenas non elit non nibh malesuada rutrum. Aenean tempor. Vivamus at enim. Donec pretium quam vitae pede. Phasellus vitae enim. In ligula lorem, mattis at, gravida eget, lacinia id, eros. Vestibulum tempus, lorem at pellentesque semper, diam est condimentum velit, at laoreet ligula eros eget leo. Praesent nunc. Etiam sed nulla. Etiam fermentum tempus libero. Mauris elit. Aenean volutpat bibendum nulla. </p>
    	<p> Maecenas quam velit, convallis id, elementum vel, pulvinar at, nisl. Fusce in velit quis mi nonummy pretium. Maecenas id mi dictum felis luctus blandit. Pellentesque placerat turpis ac metus. Integer nibh odio, pulvinar ac, hendrerit nec, ornare vitae, metus. In hac habitasse platea dictumst. Phasellus dignissim. Aenean nisl. Praesent rhoncus, nisi ac porttitor venenatis, libero ipsum convallis eros, eget adipiscing enim lectus egestas purus. Nulla sed augue. Nunc nibh tortor, dapibus vel, sodales sed, blandit sit amet, tellus. Maecenas diam nibh, dignissim eu, dapibus et, eleifend nec, ante. Suspendisse mauris felis, ornare id, venenatis a, hendrerit vitae, odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque nec nisi ac nunc tristique sagittis. Mauris turpis. Integer erat ipsum, feugiat sed, luctus ultricies, ultrices tincidunt, odio. In ultrices, ipsum non pellentesque pretium, orci ligula malesuada urna, nec rhoncus lectus elit sit amet enim. Nunc vehicula suscipit velit. </p>
    	<p> Morbi faucibus ante eu odio. Proin tempor sapien eu lacus. Maecenas dignissim nonummy magna. Proin bibendum ullamcorper orci. Morbi feugiat blandit turpis. Morbi congue orci quis odio. Mauris venenatis ante eget justo. Cras laoreet metus ac purus. Aliquam eu libero. Fusce eros diam, vehicula eu, tincidunt et, consectetuer eget, urna. Nunc commodo fringilla lectus. </p>
    </div>
    <div id="cover"></div>
    <div id="alertbox">
    	<h1 id="alerttitle"><a onclick="closeIt()" title="Close" id="close">[x]</a><span>&nbsp;</span></h1>
    	<div id="alertcontent">&nbsp;</div>
    	<form action="#" method="post">
    		<input type="button" onclick="closeIt(true)" value="Yes">
    		<input type="button" onclick="closeIt(false)" value="No" />
    		<input type="button" onclick="closeIt(false)" value="Cancel" />
    	</form>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i thank everyone for helping me out


  •  

    Posting Permissions

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