Modal box
This example shows the modal widget in action, in various ways.
You should note that the modal box is largely unstyled, to remain flexible for your needs.
Example 1: a button for showing the modal box
Standard modal box
Ajax modal box
Flash modal box
Image modal box
iFrame with custom template
Big long select to demonstrate IE6 modal boxes appear above the selects
demo_modal.htm <style> </style> <p> <button id ="modal1" type ="button" class ="iframeButton" > </button> </p> <p> <button id ="modal2" type ="button" class ="iframeButton" > </button> </p> <p> <button id ="modal3" type ="button" class ="iframeButton" > </button> </p> <p> <button id ="modal4" type ="button" class ="iframeButton" > </button> </p> <p> <button id ="modal5" type ="button" class ="iframeButton" > </button> </p> <select style ="width: 800px" > <option> </option> </select> <br /> <br />
demo_modal.js pax.load .onloaded ( function ( ) { event .bind ( pax.$( 'modal1' ) , 'click' , function ( ) { widget .modal .init ( { "This is a message with buttons in the footer" ,"" +" <button type='button' onclick='pax.widget.modal.hide();alert(\" You clicked Cancel\" );'>Cancel</button>" +" <button type='button' onclick='pax.widget.modal.hide();alert(\" You clicked OK\" );'>OK</button>" } ) ;} ) ;event .bind ( pax.$( 'modal2' ) , 'click' , function ( ) { // Ajax widget .modal .init ( { "../examples/demo_modal_ajax.htm" ,'block' ,800 ,400 } ) ;} ) ;event .bind ( pax.$( 'modal3' ) , 'click' , function ( ) { // Flash widget .modal .init ( { 504 ,355 ,'<object height="355" width="504"><param name="movie" value="http://www.youtube.com/v/XtBY7_3gj6o&rel=1"><param name="wmode" value="transparent"><embed src="http://www.youtube.com/v/XtBY7_3gj6o&rel=1" type="application/x-shockwave-flash" wmode="transparent" height="355" width="504"></object>' ,'You can use any ordinary flash object you like!' } ) ;} ) ;event .bind ( pax.$( 'modal4' ) , 'click' , function ( ) { // Image widget .modal .init ( { '<img src="../examples/demo_modal_image1.jpg" style="width: 400px; height: 300px"/>' ,'It\' s Mooodal!' ,400 ,300 } ) ;} ) ;// iFrame with custom template that uses the message parameter. event .bind ( pax.$( 'modal5' ) , 'click' , function ( ) { widget .modal .init ( { "../" ,"Showing paxjs.com!" ,//width: 416, 800 ,400 ,"<div id='templatePaxModalBox'>" +" <div id='templatePaxModalBoxFooter'>" +" <a href='javascript:pax.widget.modal.hide();'>Close this</a> [:= message :]" +" </div>" +" <div id='templatePaxModalBoxContent'>[:= content :]</div>" +"</div>" } ) ;} ) ;} ) ;
