kristofzerbe / downuppopup.js

Simple, fast and customizable popups.

downupPopup.js

Ali Dinçer

Demo

Usage

---

1. Include jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include plugin's code

<link rel="stylesheet" href="downupPopup/downupPopup.css">
<script src="downupPopup/downupPopup.js"></script> <!-- don't forget - add after jquery -->

3. Create an element

<div id="myElement1">
  <div class="downupPopup-content">
  </div>
</div>

4. Call the plugin

$("#myElement1").downupPopup();

Default Options

$("#myElement1").downupPopup({ 
 duration: "300", // milliseconds
 animation: "ease", // css effects -> ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
 background: true, // true, false -> dark background
 radiusLeft: "10px", // top-left-radius
 radiusRight: "10px", // top-right-radius
 distance: 20, // distance top
 headerText: "", // title, you can use HTML here -> <b>Example</b>
 width: "100%", // width -> 100%, 80%, 200px etc.
 minContentHeight: null, // minimum content height in px if needed (dynamic distance)
 contentScroll: false, // true, false -> for use, <div class="downupPopup-content"></div> have to inside the element
 urlHash: null // url hash & BACK button support
});

Open - Close

$("#myElement1").downupPopup('open');
$("#myElement1").downupPopup('close');

---

Examples

---

Open With Button

$("#btn-1").click(function () { 
  $("#myElement1").downupPopup("open"); 
});

Duration

$("#duration-700").downupPopup({
 duration: 700 
});

Animation

$("#linear").downupPopup({ 
 animation: "linear",
 duration: 400
}); 

$("#cubic").downupPopup({
 animation: "cubic-bezier(.96,.33,0,1)",
 duration: 1000 
});

Background

$("#background").downupPopup({ 
 background: false
});

Radius

$("#radius").downupPopup({ 
 radiusLeft: "40px",
 radiusRight: "0px" 
});

Distance

$("#distance0").downupPopup({ 
 distance: 0,
 radiusLeft: "0px",
 radiusRight: "0px" 
}); 
                
$("#distance70").downupPopup({
 distance: 70 
});

Minimum Content Height (Dynamic Distance)

$("#mincontent-600").downupPopup({
 minContentHeight: '600' //in Pixel
});

Header Text / Title

$("#headertext").downupPopup({
 headerText: "<h5 class='bg-dark text-white'>html is usable here</h5>"
});

Width

$("#width-90").downupPopup({
 width: '90%'
});

Content Scroll

$("#contentscroll").downupPopup({
 contentScroll: true 
});

<div id="contentscroll">
  <div class="downupPopup-content">
     your HTML elements... 
  </div>
</div>

URL Hash and BACK button support

$("#hash").downupPopup({
 urlHash: 'dialog-open'
});

---

Download

---

Responsive and Mobile Performance

---

---

Copyright 2021, Ali Dinçer

Dual licensed under the MIT or GPL.

written by Ali Dinçer

dincerali.com