Creating any kind of custom dialog

Availability

  • All versions of XS - 28 or later

Article updates

  • First published 29 December 2016

Related articles

Website customising

Constants

Functions, tags and conditions

Adding Javascript to your pages

Using Custom CSS

Creating a custom search dialog

Introduction

This article describes how you can create a modal dialog for any purpose. Some examples are a dialog with predefined search queries, a dialog to display terms and conditions - and so on.

Example screen show of a custom dialog

Before you begin

You need to understand how the XS tags work and you need to know Script, CSS and HTML coding. If you don't, then you can of course contract us or a third party to do the work for you.

Note that if you want to create a custom Search dialog, then please read the article Creating a custom Search dialog instead.

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 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>

Note that the above code is not properly indented because of the limited capabilities of zendesk to show code.

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 looks 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();
      } else {
            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();
      $("#modalmask").unbind("click").click(function(e){
            e.preventDefault();
            $("#modalmask").remove();
            $("#mycustomdialog").hide();
      });

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

      dlg.fadeIn(500).position({of:window});
}
}; 

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. 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk