Large close button not showing

**Wads** · 07-03-2020, 08:21 PM

Re:. IE10+Exit Intent Pop Up Script (with mobile fallback)

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

Code:

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.

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

Code:


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

.It should be...

Code:


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

Code:


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

Code:


<!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