Skip to main content
B
bizavtim
Participant
April 17, 2020
Question

Customising a popup

  • April 17, 2020
  • 3 replies
  • 1139 views

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 has been closed for replies.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 17, 2020

Have a look at this article 

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
April 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>
<!-- end overlay -->
</body>
</html>

B
bizavtimAuthor
Participant
April 18, 2020

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

That's my weekend sorted!

Thanks,

Tim. 

    O
    osgood_
    Legend
    April 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>
    <!-- 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>

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    April 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/ .

    O
    osgood_
    Legend
    April 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.

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