Question

View previous topic View next topic Go down

Question

Post by tkelly95 on Fri Aug 13, 2010 9:28 pm

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!
avatar
tkelly95
Prospect



Back to top Go down

Re: Question

Post by Admin on Fri Aug 13, 2010 9:40 pm

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

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!

Admin
Ultimate SN Fan



Back to top Go down

Re: Question

Post by tkelly95 on Fri Aug 13, 2010 11:46 pm

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 Happy

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.





avatar
tkelly95
Prospect



Back to top Go down

Re: Question

Post by Admin on Sat Aug 14, 2010 12:07 am

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.

Admin
Ultimate SN Fan



Back to top Go down

Re: Question

Post by tkelly95 on Sat Aug 14, 2010 12:16 am

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.
avatar
tkelly95
Prospect



Back to top Go down

Re: Question

Post by Admin on Sat Aug 14, 2010 12:19 am

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.

Admin
Ultimate SN Fan



Back to top Go down

Re: Question

Post by tkelly95 on Sat Aug 14, 2010 12:20 am

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.
avatar
tkelly95
Prospect



Back to top Go down

Re: Question

Post by Admin on Sat Aug 14, 2010 12:21 am

Good, glad it worked.

=> Locked

Admin
Ultimate SN Fan



Back to top Go down

Re: Question

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum