Question

I have another forumotion forum.(forumotion rules)

I was wondering how you make it so the pop-up message happens when you click "who are we" on the homepage.

Thanks!

I'm going to explain this to you since I'm glad you're not a ripper who takes anything without asking for permission

To add the link.

Code:

<a onclick = "document.getElementById('name_of_your_div').style.display='block';document.getElementById('fade_div').style.display='block'">Hyperlink</a>

What goes on the window for when you click that link.

Code:

<div id="name_of_your_div" class="name_of_css_element"><center>
Your HTML coding goes here
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('name_of_your_div').style.display='none';document.getElementById('fade_div').style.display='none'"><font color="blue" size="2"><u>Close</u></font></a></div>
<div id="fade" class="name_of_css_fade_black_element"></div></center>

To edit that box.

Code:

<style>
.name_of_css_fade_black_element{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.5;
   opacity:.50;
   filter: alpha(opacity=50);
}
/* Makes background black */

.name_of_your_css_element {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 25%;
   padding: 16px;
   background-color: #ffffff;
   z-index:1002;
   overflow: auto;}
</style>

Be sure to edit all the ID's and Classes, replace them with whatever name you want.

Hope it helps!

The Listener wrote:I'm going to explain this to you since I'm glad you're not a ripper who takes anything without asking for permission

To add the link.

Code:

<a onclick = "document.getElementById('name_of_your_div').style.display='block';document.getElementById('fade_div').style.display='block'">Hyperlink</a>

What goes on the window for when you click that link.

Code:

<div id="name_of_your_div" class="name_of_css_element"><center>
Your HTML coding goes here
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('name_of_your_div').style.display='none';document.getElementById('fade_div').style.display='none'"><font color="blue" size="2"><u>Close</u></font></a></div>
<div id="fade" class="name_of_css_fade_black_element"></div></center>

To edit that box.

Code:

<style>
.name_of_css_fade_black_element{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.5;
   opacity:.50;
   filter: alpha(opacity=50);
}
/* Makes background black */

.name_of_your_css_element {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 25%;
   padding: 16px;
   background-color: #ffffff;
   z-index:1002;
   overflow: auto;}
</style>

Be sure to edit all the ID's and Classes, replace them with whatever name you want.

Hope it helps!

Thanks!

I'm slightly confused, I'm not the best coder yet.
what is a Div and css?
This is going on my footer, so when somebody clicks the "Terms of use", that box comes up with the sites Terms of use.

This code will make you understand a little better.

Code:

<a onclick = "document.getElementById('hello').style.display='block';document.getElementById('bye').style.display='block'">Click me</a>

<div id="hello" class="cont2">
Whatever you want here
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('hello').style.display='none';document.getElementById('bye').style.display='none'"><font color="blue" size="2"><u>Close</u></font></a></div>

<div id="bye" class="cont1"></div></center>

<style>
.cont1{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.5;
  opacity:.50;
  filter: alpha(opacity=50);
}

.cont2 {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 25%;
  padding: 16px;
  background-color: #ffffff;
  z-index:1002;
  overflow: auto;}
</style>

You can see it in action here. You can use a HTML online editor to edit it according to your tastes.

Hope it's helped.

The Listener wrote:This code will make you understand a little better.

Code:

<a onclick = "document.getElementById('hello').style.display='block';document.getElementById('bye').style.display='block'">Click me</a>

<div id="hello" class="cont2">
Whatever you want here
<br>
<a href = "javascript:void(0)" onclick = "document.getElementById('hello').style.display='none';document.getElementById('bye').style.display='none'"><font color="blue" size="2"><u>Close</u></font></a></div>

<div id="bye" class="cont1"></div></center>

<style>
.cont1{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.5;
  opacity:.50;
  filter: alpha(opacity=50);
}

.cont2 {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 25%;
  padding: 16px;
  background-color: #ffffff;
  z-index:1002;
  overflow: auto;}
</style>

You can see it in action here. You can use a HTML online editor to edit it according to your tastes.

Hope it's helped.

Thanks!

I have a question, why is it opening automatically? Without the link being clicked.
I am trying to add a this in my footer, so when somebody clicks "Terms of Use", the sites T.O.U pop up.
The problem is, when I add it to the footer, it opens automatically.

Depends on what browser you use. I don't really know, I have already provided you the code, if you're looking for coding help, you're not on the right forum, try getting help on the Support Forum.

The Listener wrote:Depends on what browser you use. I don't really know, I have already provided you the code, if you're looking for coding help, you're not on the right forum, try getting help on the Support Forum.

Thank you!

I figured it out.

Good, glad it worked.

=> Locked