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

$("#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
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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