HR Content是一个轻量级、动画化、响应迅速、可定制的jQuery模式插件，能够将任何网络内容覆盖在当前页面的顶部。

如何使用它:

1.将jQuery库和HR内容插件导入到HTML文档中。

<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.模式弹出窗口的HTML结构。

<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.调用顶部容器上的插件并完成。

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

4.自定义触发事件。默认值：“点击”。

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

5.通过单击屏幕上的任何位置来确定是否允许关闭模式窗口。默认值：false。

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

6.设置模式窗口的高度。默认值：238px。

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

7.设置模式窗口的选择器。默认值：“.hr弹出窗口”。

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

8.设置触发按钮的选择器。默认值：“.popupButton”。

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

9.设置按钮类型。默认值：“sign”。

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

预览截图

轻量级动画模式弹出插件 jQuery人力资源内容