New Pop-Up Emerges at the Bottom of the Screen

I have a button on my page that, when clicked, displays a list of errors, if any.

However, if I click another button to delete a record after clicking the first button, a popup appears at the bottom of the page instead of in the middle as expected.

The intended behavior is to dim the screen and show the popup in the center of the screen.

Below is the code for the first button, and I can provide the ASP code if needed.

Sub DisplayErrors()
    Dim i As Integer = 0
    If error_array Is Nothing Then
        'Response.Redirect("GlobalDBRoutine.aspx?text=" + QuoteNolbl.Text)
    Else
        Dim Newerror_array() = error_array.Distinct.ToArray
        For i = 0 To Newerror_array.Length - 1
            Dim Trow As New TableRow
            Dim Tcell As New TableCell()
            Tcell.Text = Newerror_array(i).ToString
            Trow.Cells.Add(Tcell)
            Table2.Rows.Add(Trow)
        Next
        MessageBox.Show(" There is a problem in estimation !!! Have a look at the bottom of the page to see if it says anything if not contact IT.")
    End If
End Sub

This is the Delete button along with the modalpopup extender that I am using.

Button :

<asp:Button ID="cmdDelete" runat="server" Text="Delete" Width="80px" CssClass="ProdPlusCom"
                OnClientClick="Javascript:ShowPopup('DeletePopup'); " />
            <asp:ModalPopupExtender ID="cmdDelete_ModalPopupExtender" runat="server" DynamicServicePath=""
                Enabled="True" TargetControlID="cmdDelete" BackgroundCssClass="modalBackground"
                CancelControlID="cmdCancel" PopupControlID="DeletePopup">
            </asp:ModalPopupExtender>

Popup :

<div id="DeletePopup" class="modalPopup" style="font-family: Verdana; font-size: 10pt;
    width: 200px; height: auto; visibility: hidden">
    <asp:Label ID="lblWarn" runat="server" Text="Are You sure you want to delete this specification?"></asp:Label><br />
    <br />
    <asp:Button ID="cmdCommit" runat="server" CssClass="ProdPlusCom" Text="Ok" />
    <asp:Button ID="cmdCancel" runat="server" CssClass="ProdPlusCom" Text="Cancel" />
</div>

Answer №1

There could be a potential issue with the CSS styling. Please share the CSS code for the ModalPopup.

If you are looking to prompt the user for deletion confirmation, consider using an Ajax confirm button extender. While ModalPopup can also serve this purpose, ensure that you apply the correct CSS for it.

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

Is using canvas the best option for creating simple image animations with JavaScript?

I am currently working on a basic animation project using JavaScript. This animation involves switching between 13 different images per second to create movement. I have created two simple methods for implementing this animation. The first method involves ...

Youngster listens for guardian's occurrence in Angular 2

While the Angular documentation covers how to listen for child events from parents, my situation is actually the opposite. In my application, I have an 'admin.component' that serves as the layout view for the admin page, including elements such a ...

Do you need the Tooltip Module for Angular-bootstrap popover to work properly?

"Could it be possible that my popover isn't working because it requires the tooltip module just like the Bootstrap jQuery plugin?" Is this the reason my popover isn't functioning as expected? What exactly is the tooltip module and do I need to i ...

What is the solution for displaying just a single panel?

Is there a way to ensure that only the hidden text is displayed when clicking on the button within each panel? Currently, both panels are being revealed simultaneously... import React, { useState } from "react"; import "./styles.css"; export default func ...

Should a lengthy process be initiated upon the beginning of the web server?

After being away from web development for about 6/7 years, I find myself quite lost on how to proceed. While going through tutorials on HTML5 and such, I was hoping to receive some guidance here. Currently, I am working on creating a proof of concept (POC ...

Tips for converting module.exports object structure from JavaScript to TypeScript

I am currently in the process of converting my node.js app to TypeScript, and I have come across a number of index.js files with the following setup: module.exports = { query: require('./query'), mutation: require('./mutation') } T ...

Error encountered: The fiber texture failed to load due to a component becoming suspended during the response to synchronous input

I'm encountering an issue while attempting to load a texture through the TextureLoader: const texture = useLoader(TextureLoader, '/textures/texture.png') The error message I receive from react is as follows: ERROR A component suspended w ...

Having trouble getting card animations to slide down using React Spring

I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...

JS, Express: Encounter issues - unable to find view in directory despite following provided instructions

Currently, I am following the steps outlined in this guide: Despite conducting extensive research, I am facing difficulty in getting it to work as expected. Here is the folder structure I am working with: https://i.sstatic.net/jCEdO.png Below is a snipp ...

multer - the file uploaded by the request is not defined

I've been working on an app with Node, Express, and multer for image uploads. However, after submitting the form, req.file is coming up as undefined. I've spent hours trying to troubleshoot this issue but haven't been able to pinpoint the pr ...

Having trouble retrieving information in HTML from JSON data

I'm having trouble accessing the API data in my HTML file, which is stored in JSON format in my controller. I've tried various methods but none seem to be working. $scope.examFilterData_College = data[0].colleges; $scope.examFilterData_Course = ...

Ways to showcase Switch/Case in two separate drop-down menus

I'm currently working on a PHP file with a switch/case structure that I believe is in JSON format. While I may not be an expert in PHP, AJAX, and JSON, I'm really putting effort to learn more about it. <?php switch($_GET['make'] ...

Download CSV file directly in Internet Explorer 10 by choosing to open the file instead of saving it on your device

On my server, I have a link available to download a file: <a id="downloadCSVFile" runat="server" href="javascript:void(0)" onclick="parent.document.location = 'CSVFile.csv';">Download</a> I attempted this method as well: <a id=" ...

An error occurred while trying to create the scheduleApp module:

CSS <!DOCTYPE html> <html ng-app="scheduleApp"> <head> <title>AngularJs Schedule</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/style.css ...

Encountering a problem with AJAX displaying error code 80020101 while attempting to retrieve a string from a

I encountered an error while running my code: Microsoft JScript runtime error: Could not complete the operation due to error 80020101. I came across this thread on Stackoverflow that talks about a similar issue: Ajax request problem: error 80020101 var d ...

Convert all relative path URLs in images to absolute paths using either PHP, javascript, or jQuery

I am looking to transform any relative URL found on a webpage, with the main intention of resolving issues related to images not being displayed. The goal is to convert these relative URLs into absolute URLs. For example: From <img src="/folder/folder ...

Using Node.js and JWT: A guide to securely storing and using access tokens in the Authorization header

Has anyone encountered this issue before? I've searched extensively online but haven't found much information on the topic. I'm relatively new to using node and JWTs, and my goal is to generate a JWT and store it in the Authorization header ...

Executing a jQuery AJAX request to pass an array of values to a Controller action

I'm attempting to send an array of checkbox values from an Ajax form in MVC to a controller action. Below is the code I am using: The form (inside a modal): @using (Ajax.BeginForm("GetPrintableProject", "Project", null, new AjaxOptions { HttpMethod ...

Custom module npm package experiencing missing files issue

Introducing a new npm package called leon-theme. You can find it on npm at this link: https://www.npmjs.com/package/leon-theme For the source code, head over to Github here: https://github.com/leongaban/leon-theme After running npm run build locally in t ...

Exploring ways to create simulated content overflow using react-testing-library

I have integrated material-table with material ui to develop a spreadsheet application. One of the features I have added is setting a maximum width of 50px for cells. If the content in a cell exceeds this width, it will display an ellipsis at the end of ...