Customising a popup

Report · Apr 17, 2020

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.

Report · Apr 17, 2020

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/ .

Report · Apr 17, 2020

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.

Report · Apr 17, 2020

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

Report · Apr 17, 2020

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>

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

</body>
</html>

Report · Apr 17, 2020

Have a look at this article

https://css-tricks.com/comparing-the-different-types-of-native-javascript-popups/

Wappler, the only real Dreamweaver alternative.

Report · Apr 17, 2020

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>

</body>
</html>

Report · Apr 18, 2020

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

That's my weekend sorted!

Thanks,

Tim.