Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positioned in this example. Currently, I am utilizing the code below with the position: ['center',20], which almost achieves the desired positioning except for the fact that my outdated jQuery version is causing issues. I am seeking alternative solutions or suggestions from anyone who can help.

$('#open').click(function() {
    $('#dialog').dialog('open');

});

$(document).ready(function() {
    jQuery("#dialog").dialog({
        autoOpen:false,
        width:500,
        position: ['center',20],               
        modal: true,
        resizable: true,
        draggable: true,
        closeOnEscape: true,        
        title: "Alerts",       
        buttons: {
            OK: function () {
                $(this).dialog("close");
            }
        }
    });
});

Unfortunately, in my case, the modal is loading on the top left corner as shown in this image.

javascripthtmljquerycss

Answer №1

As per the official documentation, it is recommended to update this line as follows:

position: ['center',20],

Change it to:

position: { my: "center", at: "top", of: window },

You can view the revised fiddle here, with the code snippet provided:

$('#open').click(function() {
  $('#dialog').dialog('open');

});



$(document).ready(function() {
  jQuery("#dialog").dialog({
      autoOpen:false,
      width:500,
      position: { my: "center", at: "top", of: window },               
      modal: true,
      resizable: true,
      draggable: true,
      closeOnEscape: true,        
      title: "Alerts",       
      buttons: {
          OK: function () {
              $(this).dialog("close");
          }
      }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

<div id="dialog">modal dialog</div>
<a href="#" id="open">Open dialog</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery dynamic id selection

I'm facing a challenge with dynamically generated forms that have dynamically generated IDs and potentially classes. Although the forms are identical, they each have a unique ID at the end. How can I target and manipulate each set of inputs individua ...

javascriptjquery

The JQuery parseFloat() function seems to be consistently returning "NAN" whenever it is used with the .text property

I am currently encountering an issue with parsing the text property of an input element identified by the id currency-converter. My goal is to convert this text into a floating-point value so that I can proceed with applying mathematical operations to conv ...

javascriptjquerykeyup

In AngularJS, the execution of a subsequent AJAX call is reliant on the response of a preceding AJAX

Initially, I invoked the userSignupSubmit function. Within this method, another method called mobilenocheckingmethod is called. This method depends on the response from an AJAX call to make another AJAX call, but unfortunately, the second call does not w ...

javascriptajaxangularjsangularjs-http

Display <span> next to <select>

Currently, I have a <span> and a <select>. However, in the following code, the <span> is displayed above the <select>. My goal is to arrange it so that the <span> is shown first, followed by the <select>. .requiredSta ...

htmlcss

Navigating through a predetermined list of HTML pages with next and previous options

Hey there, I'm in a bit of a quandary at the moment. I've been searching on Google for quite some time now, but unfortunately, I can't seem to find what I'm looking for. Hopefully, you guys can lend me a hand. What I'm trying to d ...

javascriptjqueryhtmlarrays

The React.js project I created is showcased on GitHub pages and has a sleek black design

After developing a project using React.js and deploying it on github pages, everything was functioning smoothly. However, I encountered an issue where the screen turned black after logging in and out multiple times. Are there any suggestions on how to reso ...

javascriptreactjsjsongithubgithub-pages

Generate an array of checked inputs to be used when posting to a REST API

I have been using .push() to create a checked array of "List" inputs for posting to a REST API. However, it doesn't seem to be working correctly. When unchecking an item, it is not automatically removed from the array. Does anyone have a better solut ...

javascriptangularjs

Having trouble deleting JavaScript object properties within a loop?

Struggling to comprehend the behavior of this particular piece of javascript code. const devices = searchResult.results.forEach(device => { const temp = Object.keys(device.fields); for(var property in temp) { if(device.fields.hasOwnPro ...

javascripttypescript

Time whizzes by too swiftly

After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly. This is what I implemented in my attempt ...

javascripthtmlcss

Transforming JavaScript to TypeScript in Angular: encountering error TS2683 stating that 'this' is implicitly of type 'any' due to lacking type annotation

While in the process of migrating my website to Angular, I encountered an error when attempting to compile the JS into TS for my navbar. After searching around, I found similar issues reported by other users, but their situations were not quite the same. ...

javascriptangulartypescript

What causes certain event handlers to be activated when using dispatchEvent, while others remain inactive?

When it comes to event-based JS, there are two main APIs to consider: event listeners and event handlers. Event listeners can be registered using addEventListener, while event handlers are typically registered with an API similar to target.onfoobar = (ev) ...

javascripteventsbrowserdom-events

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

htmlcsscheckboxcross-browser

No matter the way I input the URL in the AJAX call, the response always comes back as successful

I ran into an issue with my ajax request. It was supposed to be a GET request that returned some data, but no matter how I configured the URL, it always gave a success response even when it didn't actually succeed. var id = 5; $.ajax({ type: ...

javascriptnode.jsajaxexpress

Issue encountered trying to access Iframe control within CRM 2016 platform

Currently in the process of upgrading CRM 2011 to CRM 2016 on-premise. The new rendering engine in the newer version is causing issues with many javascript codes not working properly. I recently encountered a problem with an iframe where I am unable to acc ...

jquerydynamics-crm-2016

Shifting annotations on a Bar Graph featuring Negative Values on Google's Chart Maker

Incorporating google charts into my MVC project. Looking to create a bar chart that accommodates negative values. Desire annotations on the same side as the end of the bar for negative values (similar to positive values shown in the green box below). ht ...

javascriptc#htmlasp.net-mvcgoogle-visualization

Ways to Extract HTML DOM Attributes using Jquery

I am working with an HTML DOM that is saved in a JavaScript Variable. I need to figure out how to retrieve its attributes. For example: <script> //element_html is ajax response var element_html = '<h1 style="" class="app-control " data-order ...

javascriptjqueryhtmlajaxdom

"Despite having an updated browscap.ini file defined in php.ini, the function Get_browser is still returning unexpected

These are the steps I have taken so far: Downloaded the updated php_browscap.ini file from (chose the PHP version) Tested php_browscap.ini, lite_php_browscap.ini, and full_php_browscap.ini. Updated the php.ini file to: [browscap] ;http://php.net/bro ...

phphtmlvb.netphp-inibrowscap

Discovering the Data Structures within the d3.js Illustrations by the Talented Mike Bostock

Wondering how to decipher the structure of JSONs in examples by Mike Bostock, like this one (after being transformed using d3): http://bl.ocks.org/mbostock/3886208 I aim to replicate it with my own fabricated array of JSON objects without relying on load ...

javascriptjsond3.js

Iterate through a nested array in JavaScript and extract specific properties by comparing them to another array

Within my code, there is a kids object structured as follows: const kids = { name: 'john', extra: { city: 'London', hobbies: [ { id: 'football', team: &apos ...

javascriptarraysjsonecmascript-6mapreduce

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

javascriptphpjqueryhtmlcss