Highlighted

Customising a popup

Community Beginner ,
Apr 17, 2020

Copy link to clipboard

Copied

popup.JPG

Hello. I'm adding a simple popup message to my page using 'behaviours' and have set the event to trigger on page load.

 

All is working as expected, but I wonder whether it's possible to edit/customise this behaviour? For example, the 'OK' button currently closes the window; can it be configured to link to another page on my website? Also, is it possible to change the 'IP' text (top left)?

 

Thanks for any advice.

TOPICS
How to

Views

803

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Customising a popup

Community Beginner ,
Apr 17, 2020

Copy link to clipboard

Copied

popup.JPG

Hello. I'm adding a simple popup message to my page using 'behaviours' and have set the event to trigger on page load.

 

All is working as expected, but I wonder whether it's possible to edit/customise this behaviour? For example, the 'OK' button currently closes the window; can it be configured to link to another page on my website? Also, is it possible to change the 'IP' text (top left)?

 

Thanks for any advice.

TOPICS
How to

Views

804

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 17, 2020 0
Adobe Community Professional ,
Apr 17, 2020

Copy link to clipboard

Copied

Those old server behaviors use javascript and could be blocked by popup blockers.  If you are trying to use a more modern popup, you would use a modal window instead of a javascript.  Personally speaking if you want to do this easier, I would recommend a marketing solution like Hubspot that offers pop ups or if you are trying to get visitors to signup for an email subscription to use a pop up from your email provider. These options would both be instead of using Dreamweaver for this. If you want a more customized popup in Dreamweaver, I would use the bootstrap components that are built in like this: https://getbootstrap.com/docs/4.4/components/modal/ .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
LEGEND ,
Apr 17, 2020

Copy link to clipboard

Copied

Hey Ben_M,

Bootstrap uses javascript to open its modal window (jQuery). Modals are used frequently to perform many operations so I doubt a pop-up blocker would block them.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
Community Beginner ,
Apr 17, 2020

Copy link to clipboard

Copied

Thanks Ben, I appreciate the advice. I'll pursue the 'Hubspot'-type option.



Best,



Tim.









--
This email has been checked for viruses by AVG.
https://www.avg.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
LEGEND ,
Apr 17, 2020

Copy link to clipboard

Copied

Why dont you take control and customise everything you need to? If you can copy and paste a bit of code then the solution is below:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal onload</title>
<style>
body {
margin: 0;
font-family: helvetica, sans-serif;
color: #999;
}
.overlay {
position: fixed;
display: none;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 2s ease;
opacity: 0;
}
.overlayContent {
background-color: #fff;
width: 35%;
padding: 20px;
border-radius: 6px;
}
.overlayContent h4 {
font-size: 20px;
margin: 0;
padding: 0 0 20px 0;
font-weight: 400;
}

.buttons {
display: flex;
justify-content: flex-end
}
.buttons a {
text-decoration: none;
background-color: #3c8aec;
color: #fff;
padding: 15px;
margin: 0 0 0 10px;
display: inline-block;
border-radius: 6px;
}
.fadeIn {
opacity: 1;
}
</style>
</head>
<body>

<div class="overlay">
<div class="overlayContent">
<h4>Subscribe to our newsletter</h4>
<div class="buttons">
<a href="#" class="noThanks">No thanks</a><a href="subscribe.html" class="subscribe">Subscribe</a>
</div>
</div>
</div>
<!-- end overlay -->


<script>
const overlay = document.querySelector('.overlay');
const noThanks = document.querySelector('.noThanks');

setTimeout(function(){
overlay.style.display = "flex";
}, 200);
setTimeout(function(){
overlay.classList.add('fadeIn');
}, 300);
noThanks.onclick = function() {
overlay.classList.remove('fadeIn');
}
</script>

</body>
</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
Adobe Community Professional ,
Apr 17, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
LEGEND ,
Apr 17, 2020

Copy link to clipboard

Copied

Well I guess if there is some concern over the use of javascript (I cant see why) you could just have a basic css solution..........hummmm:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal onload</title>
<style>
body {
margin: 0;
font-family: helvetica, sans-serif;
}
#overlay {
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 0, 0, 0.5);
position: fixed;
height: 100vh;
width: 100vw;
}
#overlay .overlayContent {
background-color: #fff;
width: 40%;
padding: 25px;
}
#overlay:target .overlayContent {
overflow: hidden;
max-height: 0;
padding: 0;
}
#overlay:target {
max-height: 0;
height: 0;
}
.overlayContent h4 {
font-size: 20px;
margin: 0;
padding: 0 0 20px 0;
font-weight: 400;
}
.buttons {
display: flex;
justify-content: flex-end
}
.buttons a {
text-decoration: none;
background-color: #3c8aec;
color: #fff;
padding: 15px;
margin: 0 0 0 10px;
display: inline-block;
border-radius: 6px;
}
</style>
</head>
<body>
<h1>Page Content</h1>
<div id="overlay">
<div class="overlayContent">
<h4>Subscribe to our newsletter</h4>
<div class="buttons">
<a href="#overlay">No Thanks</a>
<a href="subscribe.html">Subscribe</a>
</div>
</div>
</div>
<!-- end overlay -->
</body>
</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 17, 2020 0
bizavtim LATEST
Community Beginner ,
Apr 18, 2020

Copy link to clipboard

Copied

Very grateful indeed for the advice; osgood_ |  Ben_M |  and Ben Pleysier.

That's my weekend sorted!

Thanks,

Tim. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 18, 2020 1