How to create an href that opens a div on screen?

Question

I have a page with a link, that I want that every time a user clicks on it – it opens a div with content on it - and clicking anywhere will close it.

How do I do this using CSS?
Or should I do this using JavaScript? How?
Is it more recommended to do this using JS?
What loads faster on a webpage?

Fiddle to start with: http://jsfiddle.net/dnaLqa0g/1/

<a href="">A LINK</a>

<div id="popush"> 
    this is some text.
</div>


#popush{
   /*display:none; */
    border: 1px solid black;
    margin:0 auto;
    width: 200px;
    height:100px;
}

What you really want is something like bootstrap accoridion http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-accordion.php :) Next time, please show us what you have tried. Show us your code etc. — Marcel De Villiers, Oct 02 '14 at 10:51
Well first off this is a terrible question, very unclear... But you can use JavaScript to load pages inside a specified div. This does on-page load meaning the page content doesn't change but the content inside the div does. It uses an onclick function... — Katler, Oct 02 '14 at 10:51
http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript - If I understood what you meant then follow that link — Katler, Oct 02 '14 at 10:53
This question is very unclear. Does OP want an accordian, a dialog ? — Marcel De Villiers, Oct 02 '14 at 10:55
@Marcel-Is-Hier it is very unclear and I am not hundred percent sure, that is why I just took a guess of what I understood and gave him that option... — Katler, Oct 02 '14 at 11:10
What part isn't understood exactly? I just want a DIV to open in the center of the page and on every click anywhere it will close. In the most simple way in the world :) — Imnotapotato, Oct 02 '14 at 11:13

score 0 · Accepted Answer · answered Oct 02 '14 at 10:53

0

This is commonly done via JavaScript. Maybe jQuery UI Dialog is something you could use?

Generally what you want to do is:

Prepare your div with content and make it invisible via CSS (display:none) - or use css class instead.
Attach a click handler to your href and do (display:block) on that div inside the handler.

Your question sounds quite theoretically.. do you also need a code example?

Edit: Um, okay.. seems like I misunderstood the question. I was instantly thinking about dialog, not an accordion.

answered Oct 02 '14 at 10:53

Damb

14,410
6
47
49

I prefer using JS and not jquery, But maybe I will use in the end jQuery. My question is theoretically reguarding the page load time. In general yes, I will like an example... :) – Imnotapotato Oct 02 '14 at 11:10
@Hatul: Hmm.. I might be blind, but I don't see the jQuery UI library in jsfiddle. Anyway, they got the code example right at the page I posted. Just click the "view source" link and you got your example. Nice and clean ;) If there's any specific issue you got, feel free to ask. However, I got no numbers for performance. I wouldn't really bother that much as long as you aren't going to pop dozen of dialogs on your page. Also I don't think you can do this via CSS only, so you can take that part out of consideration. – Damb Oct 02 '14 at 12:02

score 0 · Answer 2 · answered Oct 02 '14 at 10:55

0

I hope I've understood your question correctly.

You can use jQuery to do this. See this example Fiddle

html

<button class="btn1">Hide</button>
<button class="btn2">Show</button>

<div id="myDiv" ><p>This is a paragraph.</p></div>

js

$(document).ready(function(){
  $(".btn1").click(function(){
  $("#myDiv").hide();
  });
  $(".btn2").click(function(){
  $("#myDiv").show();
  });
});

answered Oct 02 '14 at 10:55

Fergoso

1,584
3
21
44

This looks good, I'll try it in a minute... – Imnotapotato Oct 02 '14 at 11:06
1

Mark as correct if you're happy with the answer. thanks. – Fergoso Oct 02 '14 at 11:09
I tried this, it shows up and disaperes http://jsfiddle.net/dnaLqa0g/1/ – Imnotapotato Oct 02 '14 at 11:33
I'm not clear of what are you trying to do? – Fergoso Oct 02 '14 at 11:35
when clicking on the link - it show a div in the center of the page (above everything) - when clicking anywhere the div gets closed. – Imnotapotato Oct 02 '14 at 11:42
I'm not seeing that. something is worng at your end. There's only html & css in your link??? – Fergoso Oct 02 '14 at 11:48
and jQuery: http://jsfiddle.net/dnaLqa0g/2/ – Imnotapotato Oct 02 '14 at 11:51
your css is making it disappear. try this http://jsfiddle.net/dnaLqa0g/3/ – Fergoso Oct 02 '14 at 11:54
@Hatul "it show a div in the center of the page (above everything) - when clicking anywhere the div gets closed" .. that's exactly what jQuery UI dialog does. Btw: this answer also uses jQuery, so you can just go with that. Doing it in vanilla JS is of course possible, but is it really important for you? I mean.. is the additional effort worth it? There are quite a few things to handle. – Damb Oct 02 '14 at 11:57
@Damb http://jsfiddle.net/TCHdevlp/dnaLqa0g/9/ – Imnotapotato Oct 02 '14 at 14:59

score 0 · Answer 3 · answered Oct 02 '14 at 15:03

There were a lot of miss understanding.

I think people here made it more complex than what it is. Here is a fiddle: http://jsfiddle.net/TCHdevlp/dnaLqa0g/9/

This is the jQuery code I used:

            $(".link").click(function(e){
                e.preventDefault(); // prevent default link behaviour, or the browser will try to redirect you to an other page (that's what links do).
                $("#popush").show(function(){ //this function will only be created when the #popush shows, it's a callback.        
                    $(document).one("click",function(){  //I used $.one() I let you read the doc about this ;)
                        $('#popush').hide();
                    });
                });
            });

How to create an href that opens a div on screen?

3 Answers3