Slick Modal – CSS3 Powered Popups

Here is an example of a complete settings configuration for Slick Modal:

Container

<div class="slick-modal-container">
  <!-- Modal content will be rendered here -->
</div>

Modal

.slick-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 99999;
}

Modal Trigger

.slick-modal-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
}

Modal Trigger Text

.slick-modal-trigger span {
  font-weight: bold;
  color: #337ab7;
}

Modal Content

.slick-modal-content {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 400px;
  margin: 100px auto;
  text-align: center;
}

Modal Header

.slick-modal-header {
  background-color: #337ab7;
  color: #fff;
  padding: 10px;
  border-bottom: 1px solid #337ab7;
}

Modal Body

.slick-modal-body {
  padding: 20px;
}

Modal Footer

.slick-modal-footer {
  background-color: #337ab7;
  color: #fff;
  padding: 10px;
  border-top: 1px solid #337ab7;
}

Modal Options

.slick-modal-options {
  font-size: 14px;
  font-weight: bold;
  color: #337ab7;
  cursor: pointer;
}

.slick-modal-options:hover {
  text-decoration: underline;
}

Modal Overlay

.slick-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 99998;
}

Initialization

<script>
  $(document).ready(function() {
    $('.slick-modal-trigger').slickModal({
      modalId: '#myModal',
      overlay: true,
      close: true
    });
  });
</script>

Here are the features of Slick Modal jQuery & CSS3 Powered Popups:

1. 60+ settings: The plugin comes with a wide range of available options, allowing you to create unlimited combinations and achieve eye-catching effects for your messages.
2. 40+ popup demo templates: The plugin includes 40 pre-made quick start demos to help you get started.
3. 30+ CSS3 animations: The plugin features 30+ CSS3 animations to add visual effects to your popups.
4. 9 popup positions: You can choose from 9 different popup positions to suit your needs.
5. Popup settings generator: The plugin includes a popup settings generator with a live preview to help you build your popup quickly.
6. Animate popup, overlay, and content: You can animate the popup, overlay, and content to create a more engaging experience.
7. Page background effects: The plugin allows you to add page background effects to your popups.
8. Delayed, exit, and scrolling type: You can choose from three types of popup triggers: delayed, exit, and scrolling.
9. Auto closing feature: The plugin includes an auto-closing feature that allows you to set a timer for the popup to close automatically.
10. Date range restriction: You can set a date range restriction for your popups to display only during specific dates.
11. Hide on specific pages: You can hide the popup on specific pages or sections of your website.
12. Show after X visits: The plugin allows you to show the popup after a certain number of visits.
13. Draggable popup window: You can make the popup window draggable to allow users to move it around.
14. Load content via Ajax: The plugin allows you to load content via Ajax to improve performance.
15. Custom CSS styling: You can customize the popup's CSS styling to match your website's design.
16. Redirect visitor on popup close: The plugin allows you to redirect the visitor to a different page when the popup is closed.
17. Sticky pullout option: You can make the popup sticky and pull it out when the user scrolls down the page.
18. Public API supported: The plugin includes a public API that allows you to integrate it with other plugins and scripts.
19. 8 callbacks: The plugin provides 8 callbacks that allow you to execute custom code at specific points during the popup's lifecycle.
20. Mobile configuration: The plugin includes a mobile configuration option to optimize the popup for mobile devices.
21. Open popup via URL hash: You can open the popup via a URL hash to allow users to access it directly.
22. Cookie settings and restrictions: The plugin allows you to set cookie settings and restrictions for your popups.
23. Set custom body and popup class: You can set custom body and popup classes to customize the popup's appearance.
24. Additional advanced plugin settings: The plugin includes additional advanced settings that allow you to fine-tune the popup's behavior.

Note that some of these features may require additional setup or configuration to work properly.