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:

<div id="mycustomdialog">
   <div class="head">
      <h1>My custom dialog</h1>
      <a href="#" class="mycustomdialogclose"><img decoding="async" src="<?xs path('xscss') ?>/../images/1_0/closexbutton.png"></a>
   </div>
   <div class="container">     
      <ul class="searchlist">
         <li><a href="/search?s=searchexample1">Search example 1</a></li>
         <li><a href="/search?s=searchexample2">Search example 2</a></li>
         <li><a href="/search?s=searchexample3">Search example 3</a></li>
         <li><a href="/search?s=searchexample4">Search example 4</a></li>
      </ul>
   </div>
</div>

Adding the CSS for your HTML

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

#mycustomdialog {
   display: none;
   background-color: white;
   float: left;
   z-index: 9010;
   width: auto;
   height: auto;
   border: 1px solid silver;
   padding: 30px 50px 30px 50px;
   -webkit-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);
   -moz-box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);
   box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 0.5);
}

#mycustomdialog .mycustomdialogclose {
   float: right;
   position: relative;
   top: -30px;
   right: -20px;
}

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:

var b=$("#xscustomdialog");
if(b.length) {
   b.unbind("click").click(function(){mycustomdialog.init();});
}

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.

var mycustomdialog = {

   init: function() {
      var o=this;
      var dlg=$("#mycustomdialog");
      if(dlg.length) {
            o.showdialog(); // dialog html is already loaded, display the dialog
      } else { 
            // load the html with ajax and then display the dialog     
            var url=settings.dll+"go?a=disp&t=custom\\customdialog.html&clayout=30&si="+settings.sesid;
            $.get(url,function(h){ 
                  $("<div></div>").html(h).appendTo("body");
                  o.showdialog();
            });
      }
   },

   showdialog: function() {
      var o=this;
      var dlg=$("#mycustomdialog");

      tools.showmask(); // show mask by calling a function in the XS script library

      $("#modalmask").unbind("click").click(function(e){ // clicking the mask hides the dialog
            e.preventDefault();
            $("#modalmask").remove();
            $("#mycustomdialog").hide();
      });

      dlg.find(".mycustomdialogclose").unbind("click").click(function(e){
            e.preventDefault();
            $("#modalmask").click();
      });

      dlg.fadeIn(500).position({of:window}); // display the dialog by fading it in
   }
};

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.

var url=settings.dll+"go?a=disp&t=custom\\customdialog.html&clayout=30&si="+settings.sesid;

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.

Creating any kind of custom dialog

Before you begin

Adding the HTML for your dialog

Adding the CSS for your HTML

Adding Javascript to load and show your dialog

Share this

Related Posts

Working with synced sub websites

Configuring Stripe for online payments

Responsive images slideshow with WebP support

WebP support

Customizing the admin dashboard and toolbar

Video ingestion