Inline/Ajax Modal Popup Plugin - jQuery Sunrise

Sunrise is a small jQuery modal plugin used for creating smoothly animated popup boxes from inline and/or AJAX contents.

How to use it:

1. To use the modal plugin, include jQuery and the jQuery Sunrise plugin's JavaScript & Stylesheet on the html page.

<link rel="stylesheet" href="sunrise.css"></link>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="sunrise.js"></script>

2. Create a static modal popup from inline content within the document.

<div id="sunrise-content" style="display: none;">
  <p>Modal Content Here</p>
</div>

sunrise({
  target: '#sunrise-content'
})

3. Create a dynamic modal popup from an external webpage using AJAX requests.

<!-- ajax.html -->
<div id="sunrise">
  <p>Ajax Content Here</p>
</div>

sunrise({
  target: 'ajax.html',
  ajax: true
})

4. Execute functions when the modal popup is opened and closed.

sunrise({
  openCallback: function (target) {
    console.log('open', target);
  },
  closeCallback: function (target) {
    console.log('close', target);
  }
})

5. Execute a functions when close the popup.

sunrise({
  closeConfirm: ['input1', 'input2'],
  closeConfirmText: 'Are you sure?'
})

6. Close the modal popup manually.

sunrise('closePopup');

Changelog:

2019-05-20

• Added closeConfirm option

2019-05-10

• Bugfix

---

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