Moveable popup dialog
The "options"
The popups are opened through links (anchor tags) that have a certain class and can contain certain properties. The magic class name is "jr_popup". The href controls what is shown in the dialog and the title property specifies the title of the dialog. The property "focus_field" specifies if a certain element should get focus after the dialog is loaded. The focus field uses jQuery identifiers to find which element to give focus to so "#some_element" would look for an element with that particular id. You can also specify the height of the dialog through the property "popup_height". If you would like the popup to do some ajax call you can set that url through "ajax_request" and specify the data in json format in "ajax_data". The dialog can also be moved by dragging it with the mouse, and closed either through pressing the X in the upper right corner or by pressing the escape key. To not affect other links the data in the url that the href points to must be inside a div with a specific class, "inner_dialog".href - what to show in the dialog
popup_height - the height of the popup
popup_width - the width of the popup
ajax_request - what ajax request to run from the dialog, if any
ajax_data - What ajax data to pass if using ajax_request
focus_field - If any field in the dialog should get focus.
Example
Some link<a href="/software/popup_test.php" class="jr_popup" title="Some title" popup_height="300px" width="200px" focus_field="#something">Some link</a>
The javascript code
var functions = { showAllElements: function() { alert("showAllElements was called"); } }; $("document").ready(function() { var pos_x, pos_y, clicked = false; var ajax_data, title; $(".jr_popup").click(function(e) { e.preventDefault(); item = $(this); var anchor = item.attr("href"); var ajax_request = item.attr("ajax_request"); if (item.attr("ajax_data") != null) { ajax_data = JSON.parse(item.attr("ajax_data")); } if (item.attr("title") != null) { title = item.attr("title"); } else { title = "ERROR: No title set."; } var focus_field = item.attr("focus_field"); var title = "<div class='dialog_title'><p>" + title + "</p></div>"; var close = "<div class='dialog_close'>X</div>"; var title_wrapper = "<div class='title_wrapper'>" + title + close + "</div>"; var dialog = "<div class='dialog_container'></div>"; var popup_container = "<div class='popup_container' ondragstart='dragstart(event)' ondrop='drop(event)'>" + title_wrapper + dialog + "</div>"; $(popup_container).appendTo("body"); $(".dialog_close").click(function(e) { $(".popup_container").remove(); }); $(".popup_container").css({top: 100, left:100}); $(".dialog_container").load(anchor, function() { //alert(anchor); $(".dialog_title").on('mousedown', start_move); window_width = $(window).innerWidth(); window_height = $(window).innerHeight(); container_width = $(".popup_container").width(); container_height = $(".popup_container").height(); new_width = (window_width - container_width) / 2; new_height = $(window).scrollTop() + (window_height - container_height) / 2; $(".popup_container").css({top: new_height, left: new_width}); if (ajax_request != null) { ajaxRequest(ajax_request, ajax_data); } if (focus_field != null) { $(focus_field).focus(); } }); }); function start_move (e) { e.preventDefault(); clicked = true; pos_x = e.pageX; pos_y = e.pageY; } $(document).on('mouseup', function(e) { clicked = false; }); $(document).mousemove(function(e) { if (clicked) { //$('.popup_container').stop(); dx = e.pageX - pos_x; dy = e.pageY - pos_y; pos_x = e.pageX; pos_y = e.pageY; var offset = $('.popup_container').offset(); var new_x = offset.left + dx; var new_y = offset.top + dy; $('.popup_container').css({left: new_x, top: new_y}); } }); //Keyboard based navigation $(document).keyup(function(e) { if (e.keyCode == "27") $(".popup_container").remove(); }); });
The styling
div.dialog_title { width: 100%; display: table; height: 40px; vertical-align: top; } div.dialog_close { display: table-cell; width: 20px; vertical-align: middle; text-align: right; font-size: 16pt; cursor: default; padding-right: 8px; } div.dialog_title > p { display: table-cell; vertical-align: middle; font-size: 16pt; cursor: default; } .inner_dialog { margin: 20px; text-align: left; } .inner_dialog .dialog_icon { color: #d07a00; text-align: center; } .inner_dialog > h3 { font-weight: bold; color: #754633; font-size: 14pt; padding-bottom: 5px; line-height: 120%; text-overflow: ellipsis; overflow: hidden; } .inner_dialog input[type="submit"], button { min-width: 60px; color: black; border: 1px solid black; font-size: 14pt; min-width: 80px; min-height: 30px; } .inner_dialog input[type="text"] { width: 400px; }