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

What causes a statically generated page to appear without any style when transmitted to the client?

After setting up the Next.js official boilerplate with npx create-next-app and opening it in the browser, I observed that the static HTML document lacks styling: https://i.stack.imgur.com/mna6K.png I am concerned about potential FOUC issues. How can I en ...

javascriptreactjsnext.js

ReactJS is unable to locate a valid DOM element within the target container

I recently embarked on my journey to learn ReactJS and I celebrated successfully writing my first code. However, when I encountered the same pattern with components, an error popped up stating _Invariant Violation: registerComponent(...): Target container ...

javascriptjqueryhtmlreactjsbabeljs

Having trouble with JQuery's selectmenu() function?

I created a basic jsFiddle using jQuery UI .selectmenu() But for some reason, it's not functioning properly. Can anyone spot what I might have overlooked? <select name="filter" id="id_filter_log"> <option value="" selected>-- Select ...

jquery

Issues with PHP login/logout functionality found - PHP

My login/logout php code is not displaying correctly in my navigation bar. I want the navbar to show 'logout' when the user is logged in, and vice versa. On top of my header.php page: <?php session_start(); require "includes/dbh.inc.php" ...

phphtmlbootstrap-4

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

The AJAX email submission form is not functioning properly

Recently, I have upgraded my email sign-up form on the website to include validation. However, after adding the validation, the form no longer sends and an error message is not displayed. Upon inspecting, I found the following error: TypeError: null is ...

javascriptphpajaxformsvalidation

Having trouble concealing the logout button even after signing out with ng-show in angularjs

The code for displaying the logout button is as follows: <li class="dropdown" data-ng-if="userName"> <a href class="dropdown-toggle clear" data-toggle="dropdown" data-ng-show="userName"> </a> <!-- dropdown --> <u ...

javascriptangularjs

Transforming Sphere into Flat Surface

How can I convert the SphereGeometry() object into a flat plane on the screen? I want it to function in the same way as demonstrated on this website, where the view changes when clicking on the bottom right buttons. Below is the code for creating the sph ...

javascriptthree.js

What is the purpose of using an open quote and bracket in the `eval('('+jsonString+')')` syntax for parsing a JSON string?

What is the rationale behind this particular syntax structure? eval('(' + jsonString+ ')') When it comes to parsing JSON text, Crockford explains that "The text must be wrapped in parentheses to prevent any confusion with JavaScript& ...

javascriptjsoneval

Send the user authentication form to a different location by using an AJAX request

I am in the process of developing a .Net Web application using ASP MVC, jQuery & AJAX. Within this application, I have a list of products. When a user clicks on the detail button of a specific product, they are taken to a details view which includes an "Ad ...

jqueryajaxasp.net-mvcrazor

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

javascripthtmlcssnull

When trying to convert a function component to a class component, using `npm init react-app` may result in the error `ReferenceError: React is not defined no-undef`

After running npm init react-app appname, I noticed that the file App.js was created, containing a function component: function App() { return ( <SomeJSX /> ); } I decided to change this function component into a class component like this: c ...

javascriptnode.jsreactjsnpmwebpack

Modifying specific attributes of an object within the $scope: A step-by-step guide

When working with Angular, if you have code in the view that looks like this: <span ng-model="foo.bar1"></span> <span ng-model="foo.bar2"></span> <span ng-model="foo.bar3"></span> Due to how Angular maps objects, you c ...

javascriptangularjs

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Overlapping problem with setInterval

I am currently working on a project that requires the use of both setInterval and setTimeout. I am using setTimeout with dynamic delays passed to it. While elements are not timed out, I have implemented setInterval to print out numbers. Here is the code ...

javascriptsettimeoutsetinterval

Setting the attribute dynamically for a select box with multiple choices

In my form, I have multiple choice select boxes styled using bootstrap select. Since the app is developed in Express, I am having trouble retrieving the selected values due to bootstrap select creating a div and a list for user interaction. To tackle this ...

javascriptjqueryexpressbootstrap-select

Using a for loop in Flot to display data from a JSON file

I am working on creating a dynamic flot graph that will adjust based on the data provided. The information for my flot graph is in JSON format, and here's an example of the dataset: { "total":[[1377691200,115130],[1377694800,137759],[1377698400,1 ...

javascriptjsonfor-loopflot

Tips for adding an array to a formData: incorporating an array with two values along with their corresponding keys

Snippet : const options = new RequestOptions({ headers: headers }); let myArray; myArray = [{ "subfolder_name": subfolder, "file_upload": file }]; let formData: FormData = new FormData(); formData.append("folder_name",folder ); formData.append("counse ...

javascriptangularjsmultipartform-data

Executing a function when a user chooses to exit a webpage using the @HostListener('window:beforeunload') method

Utilizing @HostListener('window:beforeunload') allows me to detect when a user navigates away from the page, prompting a dialog window to open. I wish for an event to be triggered or a method to be executed if the user chooses to leave the page. ...

javascriptnode.jsangulartypescriptrxjs

Sign in and view SESSION data on the current page without any need to refresh the

My website currently features a login form at the top of each page for users to input their username and password. Once the submit button is clicked, I utilize jQuery AJAX method to send the data to login.php without refreshing the page. Here, the credenti ...

javascriptphpjqueryajaxauthentication