Graybeard
Well-Known Member
Your landing pages can be interactive as well as your website pages
at 'rest' page display default
when the user clicks for the offer details, product images, etc....
You could add a mouseover event like the <<==mouseover the avatar and get a user overview (like this forum does)
This creates user interactivity that can be tracked -- in theory (haven't tested it yet) You could add a
Google-analytics script to this pop or if you can code definitely your own on-click log event [I do that all the time
]
Credit where credit is due:
www.pair.com
jsfiddle.net
I altered their code a bit
- If you can code HTML/Javascript
Wordpress would require a plugin
at 'rest' page display default
when the user clicks for the offer details, product images, etc....
You could add a mouseover event like the <<==mouseover the avatar and get a user overview (like this forum does)
This creates user interactivity that can be tracked -- in theory (haven't tested it yet) You could add a
Google-analytics script to this pop or if you can code definitely your own on-click log event [I do that all the time
]Credit where credit is due:
Using jQuery to Generate Modal Pop-Up when Clicked - Pair Knowledge Base
A modal box is a pop-up window that forces the user to interact with it before returning to the site. Modal boxes are useful for warnings, informational boxes, and more. You can create a modal box with jQuery.
www.pair.com
jQuery Pop-Up - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
I altered their code a bit
HTML:
<?php
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>inpage demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
html {
font-family: "Helvetica Neue", sans-serif;
width: 100%;
color: #666666;
text-align: center;
}
.popup-overlay {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}
.popup-overlay.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
.popup-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
.popup-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}
button {
display: inline-block;
vertical-align: middle;
border-radius: 30px;
margin: .20rem;
font-size: 1rem;
color: #666666;
background: #ffffff;
border: 1px solid #666666;
}
button:hover {
border: 1px solid #666666;
background: #666666;
color: #ffffff;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<!--Creates the popup body-->
<div class="popup-overlay">
<!--Creates the popup content-->
<div class="popup-content">
<h2>Pop-Up</h2>
<p>This is how an in-page popup can made using jQuery. Ad blockers will allow it.</p>
<!--popup's close button-->
<button class="close">Close</button>
</div>
</div>
<!--Content shown when popup is not displayed-->
<h2><img src="https://www.gravatar.com/avatar/df4718495c160934969d817bb103ec82?s=280"></h2>
<button class="open">Open</button>
<script type="text/javascript" >
//appends an "active" class to .popup and .popup-content when the "Open" button is clicked
$(".open").on("click", function() {
$(".popup-overlay, .popup-content").addClass("active");
});
//removes the "active" class to .popup and .popup-content when the "Close" button is clicked
$(".close, .popup-overlay").on("click", function() {
$(".popup-overlay, .popup-content").removeClass("active");
});
</script>
</body>
Last edited:
