Get started with jquery.poptrox CDN

MIT licensed

JQuery.PopTrox: Lightweight library for creating custom modal windows.

Tags:
  • jquery
  • gallery
  • lightbox

Stable version

Copied!

How to start using jquery.poptrox CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with jquery.poptrox CDN - cdnhub.io</title>
  <!-- Add the CDN link for jQuery.popTrox -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/jquery.poptrox/2.5.0/jquery.poptrox.min.js"></script>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/jquery.poptrox/2.5.0/jquery.poptrox.css" />
  <style>
    .popover {
      background-color: #f9f9f9;
      color: #333;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      position: absolute;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <button id="show-popover">Show Popover</button>
  <div id="popover" class="popover">
    This is the popover content.
  </div>

  <script>
    $(function() {
      // Initialize popTrox on the button and popover
      $('#show-popover').popTrox({
        title: 'Popover Title',
        content: '#popover',
        placement: 'right',
        trigger: 'manual'
      });

      // Show the popover when the button is clicked
      $('#show-popover').click(function() {
        $(this).popTrox('show');
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions