Lightweight Animated Modal Popup Plugin - jQuery HR Content

HR Content is a lightweight, animated, responsive, customizable jQuery modal plugin that has the ability to overlay any web content on the top of the current page.

How to use it:

1. Import jQuery library and the HR Content plugin into the HTML document.

<link rel="stylesheet" href="/path/to/css/hrContentPopup.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/hrContentPopup.min.js"></script>

2. The HTML structure for the modal popup.

<div class="example hr-popup">
  <!-- Modal Popup -->
  <div class="content">
    <!-- Title -->
    <h2>This is first box</h2>
    <!-- Modal Content -->
    <div class="data-starts">
      <p>
        ... Modal Content Here ...
      </p>
    </div>
    <a href="#" class="popupButton">Trigger Button</a>
  </div>
</div>

3. Call the plugin on the top container and done.

$(".example").hrContentPopup({
  // options here
});

4. Customize the trigger event. Default: 'click'.

$(".example").hrContentPopup({
  event: "mouseover",
});

5. Determine whether to allow closing the modal window by clicking anywhere on the screen. Default: false.

$(".example").hrContentPopup({
  popCloseAnywhere: true,
});

6. Set the height of the modal window. Default: 238px.

$(".example").hrContentPopup({
  dataHeight: 400,
});

7. Set selector of the modal window. Default: '.hr-popup'.

$(".example").hrContentPopup({
  cssClass: ".hr-popup",
});

8. Set selector of the trigger button. Default: '.popupButton'.

$(".example").hrContentPopup({
  popupButton: ".popupButton",
});

9. Set button type. Default: 'sign'.

$(".example").hrContentPopup({
  buttonType: "close",
});

---

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