I am very new to java script, can anyone tell me how I can get a pop up with javascript on a button click.
I need to add some text and image to this popup.
Thanks
Add a comment
|
4 Answers
If you want a new window to open as a popup, you can use:
window.open('newpage.html');
This will open the file newpage.html in a new window, that you can style however you like with HTML and CSS.
Edit:
If you want to do it inside the same window, I would recommend hiding a div and then showing it on click, like this:
You can use jQuery plugins to achieve this and much more for you, but as a learning exercise the above is very simple and doesn't require external libraries
Comments
You can use:
alert('your text');
But if you need to customize the popup with images, backgrounds etc then you'd better get your hand on jQuery and study it.
There are many tutorials around, just google for them (or buy a good manual :)
3 Comments
andyb
I'm not the downvoter but in the question it is stated that the OP wants to add images, so
alert() would never work. Secondly just linking to jQuery.com and saying there are many tutorials around is not an answer! Thirdly offering a jQuery solution to someone who is new to JavaScript might be more confusing that a simple JavaScript solution.
Alan Piralla
Ok thanks, I still need to get into these mechanics. I'm ok with a downvote as long as it's explained.
andyb
Actually, looking at the votes, you have
+1 on this and no actual downvotes registered. Maybe they changed their mind?The simplest method is to use the jQuery UI popup plugin. You will also need to include the jQuery library.
http://jqueryui.com/dialog/#modal-message
Javascript:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
HTML:
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
Comments
The easiest way is using jQuery Dialog and this is a sample: jQuery Dialog
