Response title
This is preview!
position not working correctly on webkit browsers
Need more info
- Need more info
- Working on it
- Answered
in Using jQuery UI
•
10 years ago
I have a modal dialog box that works for the most part. The only problem is, in webkit browsers (safari and chrome) the positioning doesn't seem to work. It's fine in Firefox and IE.
Here is my Test code; I've turned off the submit function, so when you click the Create an Account button in the dialog all you get is an alert.
On Firefox/IE, when you click the create new users link (at the far right of the page on my screen) the dialog box opens top aligned and centered over the link, which is what I want. In Safari and Chrome, no matter what position values I use in the code (including not using any), the dialog opens at the far left of the screen, sometimes at the very top, and sometimes so far down that it's completely off the visible screen. Since this is a modal dialog, the only way to get to it to close it is to use the tab key to move into the form fields and get the focus on them. This is a big problem. Is there any way to force the dialog to open either right over the link, or centered on the screen?
The main part of the code:
- $( "#dialog-form" ).dialog({
- autoOpen: false,
- height: 300,
- width: 350,
- modal: true,
- position: {
- my: 'center top',
- at: 'center top',
- of: $('#create-user')
- },
- buttons: {
- "Create an account": function() {
- var bValid = true;
- allFields.removeClass( "ui-state-error" );
- bValid = bValid && checkLength( name, "Name", 3, 16 );
- bValid = bValid && checkLength( email, "email", 6, 80 );
- bValid = bValid && checkLength( company, "company", 5, 16 );
- bValid = bValid && checkLength( plate, "plate", 1, 7 );
- bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "name may consist of a-z, 0-9, underscores, begin with a letter." );
- // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
- bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
- if ( bValid ) {
- var nameStr = name.val();
- var emailStr = email.val();
- var companyStr = company.val();
- var plateStr = plate.val();
- var string = 'name='+ nameStr+'&email='+emailStr+'&company='+companyStr+'&plate='+plateStr;
- alert('string: '+string);
- //$( this ).dialog( "close" );
- }
- },
- Cancel: function() {
- $( this ).dialog( "close" );
- }
- },
- close: function() {
- allFields.val( "" ).removeClass( "ui-state-error" );
- }
- });
1