Socket
Socket
Sign inDemoInstall

modalsquared

Package Overview
Dependencies
32
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    modalsquared

ModalSquared.js is a super small less than a 1kb library for showing and hiding modals.


Version published
Weekly downloads
1
Maintainers
1
Created
Weekly downloads
 

Readme

Source

ModalSquared.js

HitCount

Easy, Fast and simple modals.

ModalSquared.js is a super small library for showing and hiding modals. It was specificly designed to show and hide bootstrap modals so i didnt have to use jquery and bootstrap's javascript but you can use it for anything. It's also less than 1kb!

Setup

1. Run npm install modalsquared
3. That's it you can now use ModalSquared

Documentation

Note: every modal has to have the modal class!
Note: You must put the content of your page in a div with the class of content. Do not put modals inside the content div.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="node_modules/modalsquared/ModalSquared.js"></script>
    <link href="node_modules/modalsquared/ModalSquared.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <button onclick="ShowModal('myModal')" >open modal</button>
        <h1>Content goes here</h1>
        <h2>Hello, World!</h2>
    </div>
    <div id="myModal" class="modal"><h1>My modal 1</h1><button data-modal-close >&times</button></div>
</body>
</html>

ModalShow

ModalShow shows a modal. it takes the id of the modal you want to show.

ModalHide

ModalHide hides a modal. it takes the id of the modal you want to hide. Or use data-modal-hide on the button that you want to close the modal. data-modal-hide does not take any values.

Changelog

v1.1.1

  • added blur effect
  • you now have to put the content of your page in a div with the class of .content
  • updated README

FAQs

Last updated on 06 May 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc