Open Div On Click HTML/Javascript

<style type="text/css">
#mydiv {
    width: 70%;
    height: 100%;
    overflow: hidden;
    left: 1px;
    top: 400px;
    position: fixed;
    /*opacity: 0.5;*/
    z-index: 200;
	
	
}
#mydiv-container {
    margin-left: auto;
    margin-right: auto;
}
#mydiv-content {
    width: 40%;
    padding: 20px;
    background-color: white;
    border: 1px solid #6089F7;
	border-radius:5px;
	box-shadow: 20px 20px 20px #00000;
	
}
a {
    color: #5874BF;
    text-decoration: none;
}
a:hover {
    color: #112763;
}

.close-button {
width:30px;
height:30px;
background-color: #000000;
float:right;
color:#FFFFFF;
border-radius:5px;
padding-top:5px;
font-weight:bold;
}


.subscribe-button {
width:168px;
height:44px;
float:left;
position:fixed;
z-index:650;
background-color: #FFCC00;
top:400px;
border-radius:0px 5px 5px 0px;

-moz-box-shadow:    1px 1px 3px 1px #000;
-webkit-box-shadow: 1px 1px 3px 1px #000;
box-shadow:         1px 1px 3px 1px #000;
}

.backgroundRed{
        background: #99CC00;
    }
</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

#mydiv {

width: 70%;

height: 100%;

overflow: hidden;

left: 1px;

top: 400px;

position: fixed;

/*opacity: 0.5;*/

z-index: 200;

}

#mydiv-container {

margin-left: auto;

margin-right: auto;

}

#mydiv-content {

width: 40%;

padding: 20px;

background-color: white;

border: 1px solid #6089F7;

border-radius:5px;

box-shadow: 20px 20px 20px #00000;

}

a {

color: #5874BF;

text-decoration: none;

}

a:hover {

color: #112763;

}

.close-button {

width:30px;

height:30px;

background-color: #000000;

float:right;

color:#FFFFFF;

border-radius:5px;

padding-top:5px;

font-weight:bold;

}

.subscribe-button {

width:168px;

height:44px;

float:left;

position:fixed;

z-index:650;

background-color: #FFCC00;

top:400px;

border-radius:0px 5px 5px 0px;

-moz-box-shadow: 1px 1px 3px 1px #000;

-webkit-box-shadow: 1px 1px 3px 1px #000;

box-shadow: 1px 1px 3px 1px #000;

}

.backgroundRed{

background: #99CC00;

}

</style>

<script type="text/javascript">
setInterval(function(){
        $("#divtoBlink").toggleClass("backgroundRed");
     },900)
</script>

1

2

3

4

5

setInterval(function(){

$("#divtoBlink").toggleClass("backgroundRed");

},900)

</script>

<a href="#" onclick="show('mydiv')"><div class="subscribe-button" id="divtoBlink"><img name="subscribe" src="images/subscribe.png" width="90%" alt="" /></div></a>

<div id="mydiv" style="display:none;">
    <div id="mydiv-container">
        <div id="mydiv-content">
<div class="row" style="width:100%; height:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>
<td align="left" valign="top" style="font-size:16px; font-weight:bold; color: #000000;"> Subscribe to Our Weekly Newsletter: </td>
</tr>

<tr>
<td><object type="text/html" data="http://www.xyz.com/adds.php" style="width:100%; height:180px;"></object></td>
</tr>

</table>

<div class="close-button"><a href="#" onclick="hide('mydiv')" style="color:#FFFFFF;">X</a></div>
</div>
           


        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<tr>

<td align="left" valign="top" style="font-size:16px; font-weight:bold; color: #000000;"> Subscribe to Our Weekly Newsletter: </td>

</tr>

<tr>

</tr>

</table>

</div>

<script type="text/javascript">
function show(target) {
    document.getElementById(target).style.display = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}


</script>

1

2

3

4

5

6

7

8

9

10

11

function show(target) {

document.getElementById(target).style.display = 'block';

}

function hide(target) {

document.getElementById(target).style.display = 'none';

}

</script>

Leave a Reply Cancel reply