<h2>Content from DOM-Element</h2> <a href="#container-id" class="js_trigger-modal" data-modal-effect="scale">trigger modal</a> <div id="container-id" style="display: none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>  <h2>Content from AJAX endpoint</h2> <a href="/ajax/modal" class="js_trigger-modal" data-modal-effect="scale">trigger modal</a>  <h2>Content from Rails UJS AJAX endpoint using</h2> <ul>   <li>anchor: <a href="/ajax/modal" class="js_trigger-modal" data-modal-effect="scale" data-remote="true">trigger modal</a>   <li>button: <button data-url="/ajax/modal" class="js_trigger-modal" data-modal-effect="scale" data-remote="true">trigger modal</button> </ul>  <link rel="stylesheet" href="dist/iptools-jquery-modal.css" type="text/css"> <script src="src/iptools-jquery-modal.js"></script> <script type="text/javascript">   $(document).ready(function() {     $('.js_trigger-modal').iptModal({       animationDuration: 500, // Animation duration in ms       closeOnESC: true, // Modal closed on ESC key       closeOnClickOutside: true, // Modal closed if clicked outside / on overlay       closeButton: true, // Add close button to modal       height: 'auto', // Modal height       modalClass: 'modal', // CSS class for modal styling       modalId: 'modal', // ID assigned to modal       modalVAlignTopClass: 'modal--vertical-align-top', // CSS rules setting vertical alignment of the modal       modalVAlignCenterClass: 'modal--vertical-align-center', // CSS rules setting vertical alignment of the modal       modifiers: '', // Modifier classes e.g. modal--no-padding       overlayClass: 'overlay',       showSpinner: true, // Enable/disable loader animation       spinnerHTML: '', // Loader HTML       width: '80%', // Modal width       zIndex: 102, // CSS z-index       recreate: true // whether or not to recreate modal if already existing     });   }); </script>