https://github.com/rigelglen/slideup-modal

Better Awesome-er Easier Modals that Slide from the Top
https://github.com/rigelglen/slideup-modal

css javascript jquery modals slide

Last synced: 4 months ago
JSON representation

Better Awesome-er Easier Modals that Slide from the Top

• Host: GitHub
• URL: https://github.com/rigelglen/slideup-modal
• Owner: rigelglen
• License: mit
• Created: 2011-08-31T11:06:57.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2020-02-19T13:49:42.000Z (almost 6 years ago)
• Last Synced: 2023-03-12T06:13:02.424Z (almost 3 years ago)
• Topics: css, javascript, jquery, modals, slide
• Language: JavaScript
• Homepage: https://rigelglen.github.com/Slideup-Modal/
• Size: 85 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## Slide Up CSS Modals

Sleek Sliding Modals, the way they should be .. Simple !

### Usage

- Drop in the `slideup.css` and `slideup.jquery.js` into your HTML file. For example

		

		

		

		

		

		

		

		

		

		

- Create the Modal, give it the class `slideup-modal` then add a unique id ( Can be anything, but Compulsory ) and drop in your content.

		


			
Loremipsum

			
lorem-ipsum

		

- Create the trigger ( Make sure it's an anchor tag ) and give it the attribute of `data-reveal-id` and set it equal to the ID of your modal


		Launch the Modal

- Make sure the images have the correct path !

-Have Fun !

### Options

- All the modal styles and fully editable in CSS

- Go to `slideup.jquery.js` and look at the section under options,

you can change the speed, background click close and the class that closes the modal

### Screenshot

![Screenshot](https://i.imgur.com/RYiRk7f.png)

### JavaScript Triggers

- Close Modal : `var modal = $('.slideup-modal');modal.trigger('reveal:close');`

- Open Modal : Find it out yourself !

### License

	Under MIT License