Sliding Off-canvas Dialog Plugin - jQuery dialogRight

The jQuery dialogRight plugin helps you create an off-canvas, full-height dialog panel sliding from the right side of the screen when triggered.

The smooth slide and fade animations are based on CSS3 animation properties so the plugin only works on modern browsers.

How to use it:

1. Load the needed jQuery library in the document. The slim build is recommended for better performance.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Download and load the jQuery dialogRight's files in the document.

<link rel="stylesheet" href="dialogRight.css">
<script src="dialogRight.js"></script>

3. Initialize the plugin to create a new dialog on the webpage.

$.DialogRight.init({
  title:'Dialog Title',
  content:'<b>Dialog Content</b>'
})

4. Create a confirmation dialog with custom action buttons.

$.DialogRight.init({
  title:'Dialog Title',
  content:'<b>Dialog Content</b>',
  btns:['Cancel','Okey'],
  cancel:function(){
    alert('Canceled')
  },
  commit:function(){
    alert('Confirmed')
  }
})

5. You're able to embed an exteral page into the dialog via iframe.

$.DialogRight.init({
  title: 'Dialog Title',
  url: 'https://www.jqueryscript.net'
})

---

This awesome jQuery plugin is developed by jkingfirst. For more Advanced Usages, please check the demo page or visit the official website.