Unable to choose fields and options within the popup box

Interacting with jQuery:

$("#type_name").click(function(){
            $("body").append('<div class="modalOverlay">');
            $("#add_form").fadeIn(1000);
            $("#first_name").val("");
            $("#email").val("");
            $("#phone_no").val("");
            $("#mobile").val("");
            positionPopup('#add_form');
            $("#first_name").focus();
        });

Styling in CSS:

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: .4;

    background-color: rgba(0,0,0,0.3);
}

HTML structure for the popup box:

<div id="add_form" style="display:none">
    <form id="form"  method="post" action="." onsubmit="return form_validate()">
        {% csrf_token %}
        <h2> Choose Follower Name</h2>
        <br />
        <table  width="100%">
            <tr>
                <td style="width:100px;">First name:</td><td><input type="text" name="first_name" id="first_name" maxlength="20"/></td>
            </tr>
            <tr>
                <td>Email:</td><td><input type="text" name="email" maxlength="36" id="email"/></td>
            </tr>
            <tr>
                <td>Daytime phone:</td><td><input type="text" name="phone" maxlength="15" id="phone_no" /></td>
            </tr>
            <tr>
                <td>Mobile phone:</td><td><input type="text" name="mobile" maxlength="15" id="mobile" /></td>
            </tr>
            <tr style="display:none;color:red" id="warning"><td colspan="2" align="center" >All fields are manditory</td></tr>
        </table>
        <div style="width:180px;margin:20px 5px 0 10px" align="right">

            <button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">
                <img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
            Cancel</button>   {% include "buttons/add.html" %}
        </div>

When displaying the popup box, I utilized the modalOverlay css to hide the background. However, there seems to be an issue where I am unable to select any option or field within the popup box.

Thank you

Answer №1

To ensure your modalOverlay is displayed correctly, remember to include the z-index property in your CSS for the modalOverlay class:

.modalOverlay {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .4;
background-color: rgba(0,0,0,0.3);}

In this example, I've set the z-index value to 9999, but you can choose any number as long as it's higher than other element's z-index values. It's also important to note that z-index only applies to elements with position set to absolute, relative, or fixed.

On a side note, setting opacity to .4 in your modalOverlay will also affect the transparency of its contents. If this is not your intention, you may need to adjust the opacity accordingly. Hope this helps!

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

Setting the default tab in easyTabs to be all-powerful

My ajax content is being loaded into a div-container through various navigation links, and I am using the script below to establish the defaultTab: $(document).ready( function() { $("#tab-container").easytabs({updateHash: true, defaultTab: "li:eq(3)"}); ...

Struggling with adding icons to the home screen in a Create React App?

When working with the manifest.json file, various icon sizes are specified as shown in this example: { “src”:”images/icons/apple-icon-57x57.png”, “type”: “image/png”, “sizes”: “57x57”, } In the index.html file, the ...

interactive dropdown feature using the select element with ajax on the onselect event

I am currently working on a web application where I have a drop-down list of categories. Upon selecting a category, the server fetches data in JSON format with subcategories related to that specific category. Based on this data, I'm dynamically popula ...

Use the slide bar to adjust the Angular filter value

I am diving into my very first AngularJS project and I must admit, I have zero experience with Angular. On my HTML page, I have implemented a slider bar with two handles to set a minimum and maximum value. Here is the snippet of code where this functionali ...

Storing the AJAX response in an external variable using jQuery callback function

I'm struggling to set a variable with the results of an ajax query. I understand that I can't just return the result in the success function due to its asynchronous nature. However, I'd like to achieve this using a callback function without ...

Unknown error occurred in Eventstore: Unable to identify the BadRequest issue

I'm encountering an error while using Eventstore, specifically: Could not recognize BadRequest; The error message is originating from: game process tick failed UnknownError: Could not recognize BadRequest at unpackToCommandError (\node_modul ...

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

What could be causing npm to fail to launch?

Whenever I execute node app.js, my server functions perfectly. However, when attempting to utilize nodemon for running the server, it fails to start. The error displayed by npm start is as follows: npm ERR! code ELIFECYCLE npm ERR! errno 9009 npm ERR! < ...

Positioning a footer at the absolute bottom of a webpage

I am currently working with 2 divs that are absolutely positioned within a relative container. I intend to utilize JavaScript for toggling visibility. .container { position:relative; } .section1 { position:absolute; top:0; left:0; right:0; ...

Utilizing a dynamically created Stripe checkout button

Currently, I am attempting to integrate a checkout button from the Stripe Dashboard into my VueJS Project. I have a feeling that I might not be approaching this in the correct manner, so if you have any advice, I would greatly appreciate it. In order to ...

Implementing a search filter in Vue.js using a nested for loop

I am currently working with a JSON object that contains nested objects and I need to iterate over them to extract data. Everything is functioning correctly, but now I want to implement a search/filter feature where the search is performed on the second lev ...

KnockoutJS - Struggling to bind model from simple JSON array

I've been working on an application that relies on a static JSON array, without the support of a backend service. I've been attempting to bind this JSON array to the page using KnockoutJS. Although I can successfully load the JSON array and creat ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

Creating a form in NextJS to securely transfer user input data to MongoDB

Being new to JavaScript, I have a basic understanding and some lack of experience, but I am eager to learn more. Recently, I embarked on a project using NextJS, an efficient framework that integrates with ReactJS. My current challenge lies in creating a si ...

Having trouble verifying a phone number using the awesome-phonenumber npm package?

I recently developed some JavaScript using the awesome-phonenumber npm package. index.js const yargs = require('yargs'); var PhoneNumber = require( 'awesome-phonenumber' ); const argv = yargs .usage('Usage: $0 -n [num]' ...

Utilize jQuery and .NET to extract h tags and image sources from an external URL

Looking for guidance on extracting the h1 tag, first image, and initial text snippets from an external web page for my web application. I believe jquery might be the best approach, but I am open to suggestions or a coding example in .net and jquery. Thank ...

Preventing User Input in Autocomplete TextField using React Material UI

Currently, I am utilizing the Material UI component Autocomplete to display options. However, I would like for Autocomplete to function more like a select dropdown, where users do not need to type anything to receive suggestions. Is there a way to modify A ...

When the span element's height is set to 100%, it does not automatically match the height of its parent div

I have a scenario where I am working with two div elements and a span element in between. The parent div element does not have a defined height, it is calculated based on the content within the div. However, the span element's height is set to 100% ev ...

Having trouble accessing listview capabilities in jquerymobile?

I am currently delving into the world of jquerymobile. I am experimenting with a sample project where I aim to showcase a listview. Below is the code that I have been working on. <!doctype html> <html> <head> <link rel="stylesheet" h ...

Microsoft Edge and Google Fonts display strong and distinctive lettering

When using Microsoft Edge on Windows 10, all text appears with bold UTF-8 characters: https://i.sstatic.net/JfN0S.png I'm unsure of what the issue is. Is there a solution available? ...