CODEWITHSUNDEEP
javascriptbuttonpopup
Mark Fenech
Mark Fenech

Reputation: 1358

Pop up with javascript

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

Upvotes: 0

Views: 208

Answers (4)

Andy
Andy

Reputation: 14575

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:

DEMO

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

Upvotes: 3

Phong Vo
Phong Vo

Reputation: 1078

The easiest way is using jQuery Dialog and this is a sample: jQuery Dialog

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

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>

Upvotes: 1

Alan Piralla
Alan Piralla

Reputation: 1196

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.

http://jquery.com/

There are many tutorials around, just google for them (or buy a good manual :)

Upvotes: 1

Related Questions