anymodal

    1.2.1 • Public • Published

    anyModal v1.2

    anyModal is a responsive solution for modal windows written in javascript. This new version is written in vanilla JavaScript and has no other dependencies.

    Demo

    https://andreasnorman.com/anymodal/

    Features

    • Responsive modal windows. Works great on desktop computers as well on smart phones.
    • Can be used for video, images and text
    • Unlimited content possible inside modal window. Uses friendly simple scrollbars.

    Installation

    yarn add anyModal
    

    Setup

    <!-- You'll need to include anyModal of course! -->
    <script src="anyModal.js"></script>
    
    <!-- Some basic CSS is required of course -->
    <link rel="stylesheet" href="css/anyModal.css" />

    Usage

    document.addEventListener("DOMContentLoaded", function (event) {
    	anyModal.init({
    		transitiontime: 300,
    		redrawOnResize: true,
    		backgroundscroll: true,
    	});
    });

    Settings and Defaults

    options: {
    		transitiontime: 300,
    		redrawOnResize: true,
    		backgroundscroll: true,
    };
    • transitiontime: Time in milliseconds to time transtions set in your CSS. Change this if you change your CSS
    • redrawOnResize: Force a redraw if the viewport changes.
    • backgroundscroll: Allow background behind modal to scroll.

    Typical setup

    This could be your typical script setup.

    Add the following javscript to execute the script on load.

    document.addEventListener("DOMContentLoaded", function (event) {
    	anyModal.init();
    });

    The following markup to launch the modal window. Use the data-effect attribute to change effects.

    <a href="#" data-modal="mymodal" data-effect="rm-effect-1">Fade and zoom</a>

    Effects available

    • rm-effect-1: Fade and zoom
    • rm-effect-2: Slide from right
    • rm-effect-3: Pop from bottom
    • rm-effect-4: Newspaper
    • rm-effect-5: Fall
    • rm-effect-6: Side fall
    • rm-effect-7: Sticky up
    • rm-effect-8: Side flip
    • rm-effect-9: Top flip
    • rm-effect-10: 3D sign
    • rm-effect-11: Scale
    • rm-effect-12: 3D slit
    • rm-effect-13: 3D rotate bottom
    • rm-effect-14: 3D rotate in left

    Add the following markup for the modal window itself. The ID of the modal window must match the data-modal attribute of the button

    <div class="rm-modal" id="mymodal">
    	<div class="rm-content">
    		<div class="rm-header">
    			<h3>Modal Dialog</h3>
    			<a href="#" class="rm-cross">
    				<img src="img/cross.svg" width="19" height="19" alt="" />
    			</a>
    		</div>
    		<div class="rm-inner">
    			<p>Sed posuere consectetur est at lobortis.</p>
    		</div>
    	</div>
    </div>

    External modal setup

    The following markup to launch the modal window. Use the data-url attribute to use external modal content.

    <a
    	class="btn btn-effect"
    	href="#"
    	data-modal="myexternalmodal"
    	data-effect="am-effect-1"
    	data-title="External modal loaded"
    	data-url="externalmodal.html"
    	>Fade and zoom</a
    >

    Attributes explained

    • data-modal: ID of of modal element
    • data-effect: Effect
    • data-title: Title of modal when using external content
    • data-url: URL to external modal content

    changelog

    1.2.1

    • Fixed issue when the backgrund is scrollable even when the modal is open.
    • Updated to work with Gulp rather than Grunt

    1.2.0

    • Now available on Yarn instead of Bower

    1.1.0

    • Modal windows can now display content from other URLs
    • More hooks added

    1.0.1

    • Fixed bug where an iframed video was displayed on Safari iPhone even if the modal was hidden.

    1.0.0

    • Initial release

    Install

    npm i anymodal

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    41.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • subzane