Large close button not showing [Archive]

View Full Version : Large close button not showing

Wads

07-03-2020, 08:21 PM

Re:. IE10+Exit Intent Pop Up Script (with mobile fallback) (http://dynamicdrive.com/dynamicindex8/exitpopup/index.htm)

Where do I add the class to get the large close button?

div.closeexitpop{ /* Large x close button */
width: 70px;
height: 70px;
overflow: hidden;
display: none;
position: fixed;
cursor: pointer;
text-indent: -1000px;
z-index: 3;
top: 10px;
right: 10px;
}

Current HTML code.

<div id="ddexitpop1" class="ddexitpop">
<p align="center">

<a class="calltoaction" href="#">DONATE HERE</a>

<a href="#" onClick="ddexitpop.hidepopup()">[Close Window]</a>
</p>
</div>

I've tried adding another division within existing division and just adding class on to exiting division but the closer button still does not show...

keyboard

07-06-2020, 12:46 AM

Hi Wads and welcome.
Unfortunately your post got caught in the spam filter. I've approved it now and hopefully someone will be able to help.

coothead

07-06-2020, 05:53 PM

Hi there Wads,

I would suggest that your problem lies here...

div.closeexitpop{ /* Large x close button */
.It should be...

div.ddexitpop{ /* Large x close button */

coothead

Wads

07-07-2020, 02:21 AM

Thanks coothead...

Nope, that did not fix it. The large close button doesn't show

coothead

07-07-2020, 09:01 AM

Hi there Wads,

your problem is not with the CSS, it is with your installation of the DD code.

Your basic document should look like this...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="http://dynamicdrive.com/dynamicindex8/exitpopup/ddexitpop.css" media="screen">

</head>
<body>

<div id="ddexitpop1" class="ddexitpop">
<p style="text-align:center">
<a class="calltoaction" href="#">DONATE HERE</a>
<a href="#" onClick="ddexitpop.hidepopup()">[Close Window]</a>
</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://dynamicdrive.com/dynamicindex8/exitpopup/ddexitpop.js"></script>

<script>
jQuery(function(){
ddexitpop.init({
contentsource: ['id', 'ddexitpop1'],
fxclass: 'random',
hideaftershow: false,
displayfreq: 'always',
onddexitpop: function($popup){
console.log('Exit Pop Animation Class Name: ' + ddexitpop.settings.fxclass)
}
})
})
</script>

</body>
</html>

I would suggest, though, that you do not use that script at all.
It is a surefire way of aggravating visitors to your site.

coothead

Wads

07-08-2020, 10:30 PM

Thanks. That did not work either.

No where in the above code does it style the close button.

coothead

07-09-2020, 01:38 AM

Hi there Wads,

you did not mention, that you were totally incapable of doing any basic coding.

You just wrote that it did not show.
So the code that I gave made Everything Show.

If you now want it styled , don't say that it doesn't work,
just say could you kindly style it for me.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<link rel="stylesheet" href="http://dynamicdrive.com/dynamicindex8/exitpopup/ddexitpop.css" media="screen">
<style media="screen">

#ddexitpop1 {
padding: 1em;
text-align: center;
}

#close {
display: inline-block;
padding:0.8em 1.6em;
border-radius: 0.3em;
background-color: #15c5ff;
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.4),
0.4em 0.4em 0.4em rgba(0, 0, 0, 0.4);
font-size: 1.25em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>

<div id="ddexitpop1" class="ddexitpop">
<a class="calltoaction" href="#">DONATE HERE</a>
<a id="close" href="#" onClick="ddexitpop.hidepopup()">
[ Close Window ]
</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://dynamicdrive.com/dynamicindex8/exitpopup/ddexitpop.js"></script>

<script>
jQuery(function(){
ddexitpop.init({
contentsource: ['id', 'ddexitpop1'],
fxclass: 'random',
hideaftershow: false,
displayfreq: 'always',
onddexitpop: function($popup){
console.log('Exit Pop Animation Class Name: ' + ddexitpop.settings.fxclass)
}
})
})
</script>

</body>
</html>

coothead

Wads

07-09-2020, 02:12 AM

Snapzilla!!!! Geez!!

coothead

07-09-2020, 08:22 AM

No problem, you're very welcome. :D

coothead