SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up alert message with link inside

    Hi

    i want to know how can i put a link inside alert message so that users can click on it and it takes them to some web page.....
    its urgent plzzz.....
    regards
    phphelp

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using a standard JavaScript alert method, you can't do that.
    However, you could use something like the Yahoo UI Library to create your own dialogs that can contain links. Here's a quick example, but you could also make it draggable, and change various configuration options as you like:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset:utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/container/assets/container.css">
    </head>
    <body>
    <div id="container">
    
    
    </div>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <!-- OPTIONAL: Animation (only required if enabling Animation) -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/animation/animation-min.js"></script>
    <!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>
    <script type="text/javascript">
    YAHOO.util.Event.on(window, 'load', function(){
        var mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", { 
    	      width: "20em", 
    	      effect:{effect:YAHOO.widget.ContainerEffect.FADE,
    	          duration:0.25
            }, 
    	      fixedcenter:true,
            modal:true,
            visible:false,
            draggable:false 
        });
        mySimpleDialog.setHeader("Warning!");
        mySimpleDialog.setBody("<a href=\"www.example.com\">Example.com</a>");
        mySimpleDialog.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
        mySimpleDialog.render(document.body);
        mySimpleDialog.show();
    });
    </script>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    bahrain
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats great thankx man
    but i want to put it onchange even of a text box??????
    also how to change the css??? where to put css classes?????
    its urgent plzzz.....
    regards
    phphelp

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The show() method is what causes the dialog to display. Here's how I'd do that.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset:utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/container/assets/container.css">
    </head>
    <body>
    <div id="container">
    
    <form action="">
        <div>
            <input type="text" id="foo">
        </div>
    </form>
    
    </div>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <!-- OPTIONAL: Animation (only required if enabling Animation) -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/animation/animation-min.js"></script>
    <!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>
    <script type="text/javascript">
    YAHOO.util.Event.on(window, 'load', function(){
        // Create the dialog
        var mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", { 
    	      width: "20em", 
    	      effect:{effect:YAHOO.widget.ContainerEffect.FADE,
    	          duration:0.25
            }, 
    	      fixedcenter:true,
            modal:true,
            visible:false,
            draggable:false 
        });
        mySimpleDialog.setHeader("Warning!");
        mySimpleDialog.setBody("<a href=\"www.example.com\">Example.com</a>");
        mySimpleDialog.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
        mySimpleDialog.render(document.body);
        // Attach listener to text input
        YAHOO.util.Event.on('foo', 'change', function(e){
            mySimpleDialog.show();
        });
    });
    </script>
    
    </body>
    </html>
    also how to change the css??? where to put css classes?????
    Well, my example uses the YUI default styles, but you can read more about how to configure and style at http://developer.yahoo.com/yui/.


Bookmarks

Posting Permissions

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