alert message with link inside

**phphelp** · Jan 9, 2008 14:53

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.....

**Fotiman** · Jan 9, 2008 15:25

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>

**phphelp** · Jan 9, 2008 15:43

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?????

**Fotiman** · Jan 9, 2008 15:56

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/.

User Tag List

Thread: alert message with link inside

Thread Tools

Display

alert message with link inside

Bookmarks

Bookmarks

Posting Permissions