Javascript Modal Popups

http://www.modalpopups.com/download.ashx?file=ModalPopups_0_2.zip

Javascript Modal Popups offers you a free javascript with commonly used modal popups. No CSS. No images. Auto size body. Very easy to use.

This page show demo javascript code for functions: Alert, Confirm, YesNoCancel, Prompt, Indicator and Custom.

It shows you the options to customize the look.
In order for all your modals to have the same behaviour you can set defaults with the ModalPopups.SetDefaultsfunction.

Defaults:
shadow: true, shadowSize: 5, shadowColor: "#333333", backgroundColor: "#CCCCCC", borderColor: "#999999", titleBackColor: "#C1D2E7", titleFontColor: "#15428B", popupBackColor: "#C7D6E9", popupFontColor: "black", footerBackColor: "#C1D2E7", footerFontColor: "#15428B", okButtonText: "OK", yesButtonText: "Yes", noButtonText: "No", cancelButtonText: "Cancel", fontFamily: "Verdana,Arial", fontSize: "9pt"

To set Dutch Language buttons throughout your application, just create a .js and include it in your page (below the include of ModalPopups.js)
ModalPopups.SetDefaults( { yesButtonText: "Ja", noButtonText: "Nee", okButtonText: "OK", cancelButtonText: "Annuleren" } );

This page uses syntax highlighter.

---

Alert, example 1

view plaincopy to clipboardprint

1. function ModalPopupsAlert1() {  
2.     ModalPopups.Alert("jsAlert1",  
3.         "Save address information",  
4.         "<div style='padding:25px;'>The address information has been saved succesfully<br/>" +  
5.         "to the customer database...<br/></div>",   
6.         {  
7.             okButtonText: "Close"  
8.         }  
9.     );  
10. }  

---

Alert, example 2

view plaincopy to clipboardprint

1. function ModalPopupsAlert2() {  
2.     ModalPopups.Alert("jsAlert2",  
3.         "Save address information",  
4.         "<div style='padding:25px;'>The address information has been saved succesfully<br/>" +  
5.         "to the customer database...<br/></div>",  
6.         {  
7.             okButtonText: "Close",  
8.             backgroundColor: "Yellow",  
9.             shadowSize: 15,  
10.             fontFamily: "Courier New",  
11.             fontSize: "9pt"  
12.         }  
13.     );  
14. }  

---

Alert, example 3

view plaincopy to clipboardprint

1. function ModalPopupsAlert3() {  
2.     ModalPopups.Alert("jsAlert3",  
3.         "Save address information",  
4.         "<div style='padding:25px;'>The address information has been saved succesfully<br/>" +  
5.         "to the customer database...<br/></div>",  
6.         {  
7.             titleBackColor: "#A1B376",  
8.             titleFontColor: "white",  
9.             popupBackColor: "#E9E8CF",  
10.             popupFontColor: "black",  
11.             footerBackColor: "#A1B376",  
12.             footerFontColor: "white"  
13.         }  
14.     );  
15. }  

---

Confirm

view plaincopy to clipboardprint

1. function ModalPopupsConfirm() {  
2.     ModalPopups.Confirm("idConfirm1",  
3.         "Confirm delete address information",  
4.         "<div style='padding: 25px;'>You are about to delete this address information.<br/><br/><b>Are you sure?</b></div>",   
5.         {  
6.             yesButtonText: "Yes",  
7.             noButtonText: "No",  
8.             onYes: "ModalPopupsConfirmYes()",  
9.             onNo: "ModalPopupsConfirmNo()"  
10.         }  
11.     );  
12. }  
13. function ModalPopupsConfirmYes() {  
14.     alert('You pressed Yes');  
15.     ModalPopups.Close("idConfirm1");  
16. }  
17. function ModalPopupsConfirmNo() {  
18.     alert('You pressed No');  
19.     ModalPopups.Cancel("idConfirm1");  
20. }  

---

YesNoCancel

view plaincopy to clipboardprint

1. function ModalPopupsYesNoCancel() {  
2.     ModalPopups.YesNoCancel("idYesNoCancel1",  
3.         "Confirm close of document",  
4.         "<div style='padding: 25px;'><p>You are about to close this document.<br/>" +   
5.         "If you don't save this document, all information will be lost.</p>" +   
6.         "<p><b>Close document?</b></p></div>",   
7.         {  
8.             onYes: "ModalPopupsYesNoCancelYes()",  
9.             onNo: "ModalPopupsYesNoCancelNo()",  
10.             onCancel: "ModalPopupsYesNoCancelCancel()"  
11.         }  
12.     );  
13. }  
14. function ModalPopupsYesNoCancelYes() {  
15.     alert('You pressed Yes');  
16.     ModalPopups.Close("idYesNoCancel1");  
17. }  
18. function ModalPopupsYesNoCancelNo() {  
19.     alert('You pressed No');  
20.     ModalPopups.Cancel("idYesNoCancel1");  
21. }  
22. function ModalPopupsYesNoCancelCancel() {  
23.     alert('You pressed Cancel');  
24.     ModalPopups.Cancel("idYesNoCancel1");  
25. }  

---

Prompt

view plaincopy to clipboardprint

1. function ModalPopupsPrompt() {  
2.     ModalPopups.Prompt("idPrompt1",  
3.         "Prompt",  
4.         "Please enter your ID number",    
5.         {  
6.             width: 300,  
7.             height: 100,  
8.             onOk: "ModalPopupsPromptOk()",  
9.             onCancel: "ModalPopupsPromptCancel()"  
10.         }  
11.     );  
12. }  
13. function ModalPopupsPromptOk()  
14. {  
15.     if(ModalPopups.GetPromptInput("idPrompt1").value == "") {  
16.         ModalPopups.GetPromptInput("idPrompt1").focus();  
17.         return;  
18.     }  
19.     alert("You pressed OK\nValue: " + ModalPopups.GetPromptInput("idPrompt1").value);  
20.     ModalPopups.Close("idPrompt1");  
21. }  
22. function ModalPopupsPromptCancel() {  
23.     alert("You pressed Cancel");  
24.     ModalPopups.Cancel("idPrompt1");  
25. }  

---

Indicator, default

view plaincopy to clipboardprint

1. function ModalPopupsIndicator() {  
2.     ModalPopups.Indicator("idIndicator1",  
3.         "Please wait",  
4.         "Saving address information... <br>" +   
5.         "This may take 3 seconds.",   
6.         {  
7.             width: 300,  
8.             height: 100  
9.         }  
10.     );  
11.               
12.     setTimeout('ModalPopups.Close(\"idIndicator1\");', 3000);  
13. }  

---

Indicator, with custom indicator image

view plaincopy to clipboardprint

1. function ModalPopupsIndicator2() {  
2.     ModalPopups.Indicator("idIndicator2",  
3.         "Please wait",  
4.         "<div style=''>" +   
5.         "<div style='float:left;'><img src='spinner.gif'></div>" +   
6.         "<div style='float:left; padding-left:10px;'>" +   
7.         "Saving address information... <br/>" +   
8.         "This may take 3 seconds." +   
9.         "</div>",   
10.         {  
11.             width: 300,  
12.             height: 100  
13.         }  
14.     );  
15.               
16.     setTimeout('ModalPopups.Close(\"idIndicator2\");', 3000);  
17. }  

---

Custom (Customized)

view plaincopy to clipboardprint

1. function ModalPopupsCustom1() {  
2.     ModalPopups.Custom("idCustom1",  
3.         "Enter address information",  
4.         "<div style='padding: 25px;'>" +   
5.         "<table>" +   
6.         "<tr><td>Name</td><td><input type=text id='inputCustom1Name' style='width:250px;'></td></tr>" +   
7.         "<tr><td>Address</td><td><input type=text id='inputCustom1Address' style='width:250px;'></td></tr>" +   
8.         "<tr><td>ZipCode</td><td><input type=text id='inputCustom1ZipCode' style='width:100px;'></td></tr>" +   
9.         "<tr><td>City</td><td><input type=text id='inputCustom1City' style='width:250px;'></td></tr>" +   
10.         "<tr><td>Phone</td><td><input type=text id='inputCustom1Phone' style='width:250px;'></td></tr>" +   
11.         "<tr><td>E-Mail</td><td><input type=text id='inputCustom1EMail' style='width:250px;'></td></tr>" +   
12.         "</table>" +   
13.         "</div>",   
14.         {  
15.             width: 500,  
16.             buttons: "ok,cancel",  
17.             okButtonText: "Save",  
18.             cancelButtonText: "Cancel",  
19.             onOk: "ModalPopupsCustom1Save()",  
20.             onCancel: "ModalPopupsCustom1Cancel()"  
21.         }  
22.     );  
23.               
24.     ModalPopups.GetCustomControl("inputCustom1Name").focus();   
25. }  
26. function ModalPopupsCustom1Save() {  
27.     var custom1Name = ModalPopups.GetCustomControl("inputCustom1Name");   
28.     if(custom1Name.value == "") {  
29.         alert("Please submit a name to this form");  
30.         custom1Name.focus();  
31.     }  
32.     else {  
33.         alert("Your name is: " + custom1Name.value);  
34.         ModalPopups.Close("idCustom1");  
35.     }  
36. }  
37.   
38. function ModalPopupsCustom1Cancel() {  
39.     alert('You pressed Cancel');  
40.     ModalPopups.Cancel("idCustom1");  
41. }  

---

Alert (loadFile: "TextFile.txt")

view plaincopy to clipboardprint

1. function ModalPopupsAlert99() {  
2.     ModalPopups.Alert("jsAlert99",  
3.         "Save address information",  
4.         "", {  
5.             okButtonText: "Close",  
6.             loadTextFile: "TextFile.txt",  
7.             width: 500,  
8.             height: 300});  
9. }     

---

Take me back to ModalPopups.com