StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's an example that allows you to pass in options and a callback. The callback is executed when one of the buttons is clicked, and it receives the type of button e.g. <code>CONFIRM</code> or <code>CANCEL</code>.</p> <p>You'll notice that I don't use element ID's or classes to get a handle on them. Instead, it keeps a reference to the elements after creating. The benefit of this is that it makes it more generic and won't run into class or ID conflicts with other code.</p> <p><a href="http://jsfiddle.net/Dn67u/1/" rel="nofollow">Demo</a></p> <p>Plugin code:</p> <pre><code>(function($) { $.extend({ popup: function(options, callback) { var container; function actionClicked(){ var type = $(this).data('type'); container.remove(); // remove the popup from the DOM callback(type); // execute callback } // create buttons under a table var table = $('<table><tr><td class="confirm"></td><td class="cancel"></td></tr></table>'); table.find('.confirm').append( $('<button></button>', { type : 'button' }) .data('type', 'CONFIRM') .text('Confirm') .click(actionClicked) ); table.find('.cancel').append( $('<button></button>', { type : 'button' }) .data('type', 'CANCEL') .text('Cancel') .click(actionClicked) ); // create the popup elements container = $('<div class="info-overlay"></div>') .append( $('<h1></h1>').text(options.title) ) .append( $('<p></p>').text(options.message) ) .append(table); $('body').prepend(container); } }); })(jQuery); </code></pre> <p>Usage:</p> <pre><code>$.popup({ title : 'my title', message : 'my message', type : 'my type' }, function(action){ console.log("selected action " + action); if(action == 'CONFIRM'){ // confirmed } else if(action == 'CANCELLED') { // cancelled } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload