>, Tutorials>Creating any kind of custom dialog

Creating any kind of custom dialog

This article describes how you can create a modal dialog for any purpose. For example, a dialog with predefined search queries, a dialog to display terms and conditions – and so on. Such dialogs appear on top of the page a user is viewing.

Before you begin

Custom dialogs are created with the code editor. This requires certain skills. To learn more, please read Indradox XS Customisation first. You can also create a custom Search dialog. This is described in a separate article.

Adding the HTML for your dialog

You will first need to add the HTML for your dialog to any of the custom templates. For this example, we use custom 10 which has the code id 30 (this is important because you’ll need the id to load the HTML with your script).
For this simple example, enter the following code into the editor:

Adding the CSS for your HTML

Load the custom CSS into the editor and add the code below:

Adding Javascript to load and show your dialog

Load the Client script into the editor.

Find the implementation of the Client object and add the following to the init function:

The above Javascript uses JQuery to look for an HTML element with id xscustomdialog. This will be the id of a button or link that you can add to e.g. your menu, your footer or anywhere on your pages. Next, you’ll need to add the Javascript to load and show the dialog. Add this code after the client object.

The init() function checks to see if the HTML is already loaded and if not, then it will use an AJAX call ($.get()) to load the HTML and to then attach it to the document body – before calling the showdialog() function.

The URL (see above) that is used to load the HTML is simple. The important thing is to use the correct parameter value for the parameter clayout. In our example it has the value 30 because that is the id of the custom template that we have used to create and store the HTML. You can use the same URL to load other dialogs or HTML as well by simply changing the value for the clayout parameter.

Note that the above example uses a function from the XS script library tools, to display a modal mask on top of which the dialog will show. It uses the JQuery function fadeIn and the JQuery.UI position function to show the dialog.

2017-02-17T11:59:45+01:00 February 17th, 2017|Categories: Customisation, Tutorials|Tags: , , , , |