WordPress 4.1 – jQuery UI Dialog window position not centered

Home Forums BulletProof Security Pro WordPress 4.1 – jQuery UI Dialog window position not centered

This topic contains 0 replies, has 1 voice, and was last updated by  AITpro Admin 3 years, 7 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #19248

    AITpro Admin
    Keymaster

    Position Method:  Position an element relative to another.

    http://api.jqueryui.com/position/

    Type: Object
    • my (default: "center")
      Type: String
      Defines which position on the element being positioned to align with the target element: “horizontal vertical” alignment. A single value such as "right" will be normalized to "right center", "top"will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g.,"right+10 top-25%". Percentage offsets are relative to the element being positioned.
    • at (default: "center")
      Type: String
      Defines which position on the target element to align the positioned element against: “horizontal vertical” alignment. See the my option for full details on possible values. Percentage offsets are relative to the target element.

    Previously BPS was using the older position: "center" jQuery code to center jQuery UI Dialog windows on plugin pages. The new jQuery versions use the Options above.  If anyone else runs into a problem in WordPress 4.1 with jQuery UI Dialog window positioning then here is an example of the correct position Option code.

    jQuery(document).ready(function($){				
    	var $info1 = $("#bps-modal-content1");     
    		$info1.dialog({                            
    			dialogClass: "wp-dialog",  
    			autoOpen: false,
    			show: {
    				effect: "blind",
    				duration: 500
    			},
    			hide: {
    				effect: "explode",
    				duration: 300
    			},
    			modal: false,
    		 	width: 400,
    		 	height: 500,			
    		 	position: { 
    				my: "center", 
    				at: "center" 
    			},
    		 	buttons: {             
    				"Close": function() {                 
    					$(this).dialog("close");             
    				}         
    			}
    		});
     
    	$("#bps-open-modal1").click(function(event) {
    		event.preventDefault();
    		$info1.dialog("open");
    	});
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.