Popup JS

/*
 * To use this feature simply add an attribute to your open poup button
 * The attribute syntax should be as follows: insert-targetID="content"
 *
 */

<div class="product">
    <h2>Printing Services</h2>
    <p>$100.00</p>
    <a class="custom-atc" open_popup="popup" insert_price="100.00" insert_name="Printing Services">Buy Now</a>
</div>

<div class="product">
    <h2>Business Cards</h2>
    <p>$150.00</p>
    <a class="custom-atc" open_popup="popup" insert_price="150.00" insert_name="Business Cards">Buy Now</a>
</div>



<popup id="popup">
    <h1 id="name">Hello World!</h1>
    <p>Price: $<span id="price">100</span> Dollars</p>
</popup>



<script src="https://dash.pushabl.com/wp-content/themes/pushws-hello-child/js/popup.js?v=10.0.1.7"></script>​

QUICK CODES | GET STARTED 

Send:
Insert dynamic text to popup: insert_{variable} = value
Open popup on click = open_popup = {variable}

Receive:
id= {variable}
id= {variable}

----

Coming soon...

- Send dynamic HTML to elements with dynamic content features.


----

IDEAS

Send HTML to elements.

- We need to make the insert variable a little easier. For instance, I want to use it as a select box dropdown and send the value from the list to the input on option select. For instance:


<input value="{insert_orientation}">

<li insert_orientation="Horizontal">Horizontal</li>
<li insert_orientation="Vertical">Vertical</li>


----

Popup JS is straightforward to use.

Start by adding this link to your header:

<script src="https://dash.pushabl.com/wp-content/themes/pushws-hello-child/js/popup.js?v=10.0.1"></script>​

//Include Jquery link if not already installed on website
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://dash.pushabl.com/wp-content/themes/pushws-hello-child/js/popup.js?v=10.0.1"></script>​

To create a popup

//Add custom CSS to style the popup however you want
video_intro {
    position: fixed;
    display: none; //This will hide the popup by default
    width: fit-content;
    left: 50%;
    top: 50%;
    height: fit-content;
    object-fit: contain;
    z-index: 5;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 100px 50000px #000000ee;
}

//Add an ID to the popup in this case: amaury_intro
<video_intro id="amaury_intro" class="">
<img src="https://thepastryacademy.com/wp-content/uploads/2024/02/close-4.png" width="25" height="25" close="">
<video width="1200" height="auto" controls="" autoplay="" muted="" playinline="">
<source src="https://thepastryacademy.com/wp-content/uploads/2024/02/the-pastry-academy-intro.mp4" type="video/mp4">
</video>
</video_intro>

//Add open_popup attribute to targeting the id of the popup to open it
<a open_popup="amuary_intro">View Trailer</a>​

//Use close_popup to target popup id to hide
<a close_popup="amuary_intro">Close</a>​

Dynamic Popup Content

If you ever wanted to make a dynamic popup, where the content changes based on which button you click, you are in luck because, with Popup JS, you can quickly start adding this feature to your website.

/*
 * To use this feature simply add an attribute to your open poup button
 * The attribute syntax should be as follows: insert-targetID="content"
 *
 */

<div class="product">
    <h2>Printing Services</h2>
    <p>$100.00</p>
    <a class="custom-atc" open_popup="popup" insert_price="100.00" insert_name="Printing Services">Buy Now</a>
</div>

<div class="product">
    <h2>Business Cards</h2>
    <p>$150.00</p>
    <a class="custom-atc" open_popup="popup" insert_price="150.00" insert_name="Business Cards">Buy Now</a>
</div>



<popup id="popup">
    <h1 id="name">Hello World!</h1>
    <p>Price: $<span id="price">100</span> Dollars</p>
</popup>



<script src="https://dash.pushabl.com/wp-content/themes/pushws-hello-child/js/popup.js?v=10.0.1.7"></script>