Modal Dialogs

You can create dialogues using Magentrix JavaScript libraries.

Modal Dialogs

Using the modal dialogue plugin, you can create a Bootstrap modal dialogue supported on both desktop and mobile devices.

<div id="myModal">
   <!-- my dialog contents -->
</div>

<script>
   $(function() {
       $("#myModal").modalDialog({
           title:"My title",
           buttons:
              [
                 {
                    label: "OK",
                    onclick: function() { 
                      $("#myModal").modalDialog("hide");
                    }
                  }
              ]
           }
       });
   });
</script>

The list below contains all properties of the modal dialogue.

Property	Type/Options	Description
buttons	A class that includes functions for button actions.	The function name will be used as a button label.
title	string	Title of the dialog box.
show	boolean (true/false), default is "true".	Whether the dialog should be shown as soon as it is constructed
size	string	Possible values are "lg" as large, "md" as medium.
keyboard	boolean	Closes the modal when the escape key is pressed.
distroyOnClose	boolean (true/false), default is "false"	Destroys the modal at close.

Button Properties

Property	Type/Options	Description
label	string	Sets the button's label.
className	string	CSS class name such as "btn btn-primary"
onclick	function	Call back that is triggered once the button is clicked on.

The example below shows how you can show or hide the modal dialog.

//show
$("#myModal").modalDialog("show");

//hide
$("#myModal").modalDialog("hide");

Refer to Bootstrap documentation for more advanced settings and supported events.

Iframe Modal

Using this modal plugin you can create modals that show another page within an iFrame. Note that using this plugin you can only have one iFrame modal open at a time.

<script>
   $(function() { 
        $.frameDialog({
             title: "Iframe Modal",
             frameUrl: "/aspx/mypageToShowInDialog",
             frameHeight: 400,
             destroyOnClose: true
        });
   });
</script>

Note that all other settings and events which apply to Modal Dialogs apply to the iFrame Modals as well. You can optionally specify an ID for the iFrame generated in order to be able to interact with it after the Dialog is initialized.

Property	Type/Options	Description
frameId	string	The ID of the iframe which will be added to the DOM.
frameUrl	string	The relative or absolute URL of the page which needs to be loaded inside the iFrame.
frameHeight	Number, default:250	The height of the iFrame within the dialog.
buttons	A class that includes functions for button actions.	The function name will be used as the button label.
title	string	Title of the dialog box.
show	boolean (true/false), default is "true".	Whether the dialog should be shown as soon as it is constructed.
size	string	Possible values are "lg" as Large, "md" as Medium.
keyboard	boolean	Closes the modal when the escape key is pressed.
destroyOnClose	boolean (true/false), default is "false"	Destroys the modal at close.

The example below demonstrates how you can create an iFrame modal and show the modal at a later time while changing the page it shows.

<script>
   $(function() { 
        $.frameDialog({
             title: "Iframe Modal",
             frameId: "MyFrame",
             frameUrl: "/aspx/mypageToShowInDialog",
             frameHeight: 400,
             show: false,
             destoryOnClose: true
        });
   });
   
   function showNewPage(url) {
       $("#MyFrame").attr("src",url);
       $.frameDialog("show");
   }
</script>

Table of Contents

Modal Dialogs

Modal Dialogs

Iframe Modal