sidler

the dialog library

Getting Started

npm install sidler --save

Your first dialog

Show a dialog that appears from the right hand side of the page

Click here to toggle the dialog

Here is how to do it

Add the dialog element to your page (anywhere in the DOM is fine)


      <div id="example1">
        <h1>Example 1</h1>
        <p>This dialog is modal and appears from the right hand edge</p>
      </div>

Style the dialog


    #example1 {
      background-color: white;
      height: 100%; 
      top: 0;
      padding: 10px;
      border-left:30px solid #b78d94;
    }

Initialize sidler


      var example1 = sidler.init({selector: '#example1', position: 'right', modal: true});

Show the dialog


      example1.show();

For more options check out the API

Example 1

This dialog is modal and appears from the right hand edge

You can hide it like this: 

example1.hide();
Click to hide

How about an inline dialog?

Click here to toggle the dialog

This is the main content area where you would display anything to the user

Example 2

In a horrible case of cross browser support the size of this dialog is determined by the size of the content area.

A size of 1000% for the content area indicates that the content area will fill 50% of the available space when the dialog is expanded.

A size of 2000% for the content area indiciates that the content area will fill twice that of the dialog when the dialog is expanded.

hide

Add the dialog element to your page


      <div class="example2 container">
        <div class="content">
          This is the main content area where you would display anything to the user
        </div>
        <div id="example2" class="hide">
          <div>
            <h1>Example 2</h1>
            <a href="#" onclick="example2.hide();return false;">hide</a>
          </div>
        </div>
      </div>

Style the dialog


    .example2.container {
      display: -webkit-flex;
      display: flex;
      height: 500px;
    }

    .example2 .content {
      width: 2000%;
      background-color: lightblue;
    }

    #example2 > div {
      padding: 10px;
    }

Initialize sidler


      var example2 = sidler.init({selector: '#example2', position: 'right', modal: false, edge: false})

Show the dialog


      example2.show();

A Centered Modal

Click here to toggle the dialog

Add the dialog element to your page


      <div id="example3" class="hide">                                                                                                                                                                         
        <div class="border">
          <h1>Example 3</h1>
          <p>A centred modal dialog</p>
        </div>
      </div>

Initialize sidler


      var example3 = sidler.init({selector: '#example3', position: 'top', modal: true, edge: true});

Style the dialog


    #example3 {
      padding-top:100px;
      left: 100px;
      right: 100px;
    }

    #example3 .border {
      background-color: white;
      border: 5px solid #b78d94;
      padding: 10px;
    }

Example 3

A centred modal dialog

API

Initialize


      var dialog = sidler.init({selector: '#dialog', position: 'right'});

Parameters

selector

The css selector used to find the dialog element

position

top|right|bottom|left - the edge of the screen the dialog should appear from (requires the edge parameter to be true)

edge

true|false - make the dialog appear from the edge of the screen

Methods


      dialog.toggle(); // toggle show/hide
      dialog.show();   // show the dialog
      dialog.hide();   // hide the dialog