Creating unblockable Pop Up on click

Question

how can i create a popup which isn't blocked when a user clicks on a specific text? So if someone want more to know about something the person can just click the text an get a pop up like on following website.

http://www.berater-mainz.de/cms/struktur.html

Is there a simple way? Does anyone has an idea?

Do not use the js alert function. Use a hidden div, that you can show when a button is clicked.
Presuming that your are using JQuery. The same is easily possible with javascript. — Patrick Geyer, Jan 21 '14 at 15:07
Until now i just used CSS and HTML no JavsScript or so on ^^. I also don't want a button just a Text like a link. — Sven Bamberger, Jan 21 '14 at 15:11
I do not think that's possible. Would you object to using JavaScript? — Patrick Geyer, Jan 21 '14 at 15:13
Sure, it was just an information that I'm not familiar with JavaScript until now ^^ — Sven Bamberger, Jan 21 '14 at 15:15
Ok to make it clearer I don't have any idea what you are doing with this code. It would be fine if you could give me a little working example so I can understand what happens. — Sven Bamberger, Jan 21 '14 at 15:26
I have updated my answer to show a complete example. Is this something that you could be looking for? — Patrick Geyer, Jan 21 '14 at 18:02

Patrick Geyer · Accepted Answer · 2014-01-21T18:01:58.847

Do not use the JavaScript alert function as this can be blocked by browsers. Instead use a hidden div that you can show when a button is clicked.

First you will have to include the JQuery library in your HTML File by including a link to it in the head. A library is basically a lot of code written for you so that you can invoke complicated functions with less code.

<head>
    <script type="text/javascript"> 
    document.write([ "\<script src='", ("https:" == document.location.protocol) ? "https://" : "http://", "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" ].join('')); 
   </script> <!-- This script tag includes JQuery's functions in you page. -->
</head>

<div style='display:none;'><!--This is the popup box!--></div> 
<script>
$(function(){ 
    $('button').on('click', function(){ //When the button is clicked...
        $('div').css('display', 'block'); //Show the previously hidden div
    });
});
</script>

... as far as I know, there is no way to do it without JavaScript.

Creating unblockable Pop Up on click

1 Answers1