Show popup when clicking on a button

Written by @kerixa 21 August 2012

A popup menu is shown when a visitor click on a button.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<HTML>
<HEAD>
<!--START OF PopUp on Button Click-->

<SCRIPT LANGUAGE="JavaScript">
function AlertCC(label, msg)
{
  var cc1 = 
    "<TITLE>Window Title</TITLE>" +
    "<BODY BGCOLOR='FFFFFF'><TABLE BORDER=0><TR>" +
        "<TD WIDTH=90% HEIGHT=90 VALIGN=TOP ALIGN=LEFT>"+
        "<FONT SIZE=4 FACE=ARIAL>"
  
  var cc2 = "<FONT COLOR='FF0000'><B>"+label+"</B></FONT><BR><P>"

  var cc3 =   
    "</TD><TD WIDTH=10%> </TD></TR><TR><TD> </TD>"+
    "<TD VALIGN=BOTTOM ALIGN=RIGHT>"+
    "<FORM><INPUT TYPE='BUTTON' VALUE='Close Window'" +
                   "onClick='self.close()'>"  +
    "</FORM></TD></TR></TABLE></BODY>"

 
  popup = window.open("","popDialog","height=280,width=400,scrollbars=no")
  popup.document.write(cc1+cc2+msg+cc3)
  popup.document.close()
}

function ccalert1()
{
  AlertCC('Alert One', 'This script will let you place information about your product or topic of choice.')
}
function ccalert2()
{
  AlertCC('Alert Two', 'This script will let you place information about your product or topic of choice.')
}
function ccalert3()
{
  AlertCC('Alert Three', 'This script will let you place information about your product or topic of choice.')
}
function ccalert4()
{
  AlertCC('Alert Four', 'This script will let you place information about your product or topic of choice.')
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER><FORM><INPUT TYPE="BUTTON" VALUE="[ Alert One ]" onClick="ccalert1()"></FORM></CENTER><p>
<CENTER><FORM><INPUT TYPE="BUTTON" VALUE="[ Alert Two ]" onClick="ccalert2()"></FORM></CENTER><p>
<CENTER><FORM><INPUT TYPE="BUTTON" VALUE="[ Alert Three ]" onClick="ccalert3()"></FORM></CENTER><p>
<CENTER><FORM><INPUT TYPE="BUTTON" VALUE="[ Alert Four ]" onClick="ccalert4()"></FORM></CENTER><p>
<!-- END OF SCRIPT --><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2