Skip to main content
bizavtim
Participant
Apr 17, 2020 12:33 PM UTC
Question

Customising a popup

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.

This topic is closed to new replies. Start a new post to keep the conversation going.

7 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
Apr 17, 2020 2:05 PM UTC

Have a look at this article 

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

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
osgood_
Legend
Apr 17, 2020 3:43 PM UTC

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>

Translate
bizavtimAuthor
Participant
Apr 18, 2020 11:02 AM UTC

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

That's my weekend sorted!

Thanks,

Tim. 

Translate
    osgood_
    Legend
    Apr 17, 2020 1:06 PM UTC

    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>

    Translate
    Community Expert
    Ben MCommunity Expert
    Community Expert
    Apr 17, 2020 1:01 PM UTC

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

    Translate
    osgood_
    Legend
    Apr 17, 2020 1:11 PM UTC

    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.

    Translate
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices