The background on my modal remains unchanged

I have integrated a modal using Iframe for user login/registration on my website.

Here is the HTML code: 

<div class="modal" id="ays-popin-connexion" aria-hidden="true">
    <div class="modal-body" aria-hidden="true">
        <iframe src="***" id="iframe1" class="popup" frameborder="0" aria-hidden="true">
        </iframe>
    </div>
</div>

And this is the CSS styling: 

.modal{
        height:650px;
        width:950px;
        left:30%;
        top:10%;
        opacity: 0.8;
        z-index: 4589365;
    }
    .modal-body{
        height:650px;
        width:950px;
        padding:0;
        margin:0;
        max-height:2000px;
    }
    .popup{
        height:650px;
        width:950px;
        padding:0;
        margin:0;
    }

For the JavaScript functionality, here's what I have implemented: 

window.onload = function()
{  
    $("#ays-menu a").on("click",function(event){
          if(this.text == "CONNEXION");
          {
          console.log($(this).attr('href'));
         $("#ays-popin-connexion").toggle(1500);
           console.log(this);
          }
     });
}

If you want to see how the modal looks, you can check it out here: https://i.stack.imgur.com/4qwQ0.png

However, I am facing an issue where I want the background outside of my modal to fade or turn grey but I'm not sure how to achieve this effect.

Also, I would like to know how to make the modal close when clicked outside of it, as I assumed this was a native feature.

If you want to experiment with it yourself, simply visit dev.appyourself.com and click on the red button labeled "connexion".

javascripthtmlcssmodal-dialog

Answer №1

Start by creating an empty div with the class of "cover".

Add the following style to .cover:

.cover{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:4580000; /*lower than the modal but higher than body*/
    background:rgba(0,0,0,0.5);
    display:none;
}

Next, include the jQuery code:

$("#menu-options a").on("click",function(event){
      if(this.text == "LOGIN"){
          $(".cover").show();
          $("#login-modal").toggle(1500);
      }
 });

$('.cover').click(function(){
    $('.modal').hide();
    $(this).hide();
});

Keep in mind that this is a basic example and you may need to tweak it to fit your specific needs.

Make sure to adjust the height and width of the login modal to avoid scrollbars, or apply overflow:hidden; to .modal.

Answer №2

Here is the modified code snippet that I have prepared for you:

<div class="modal" id="ays-popin-connexion" aria-hidden="true">
    <div class="modal-body" aria-hidden="true">
        <iframe src="***" id="iframe1" class="popup" frameborder="0" aria-hidden="true">
        </iframe>
    </div>
</div>

<!--   Additional code for modal backdrop -->
<div class="modal-backdrop" style="display:none;"></div>

Here is the CSS styling for modal-backdrop:

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000;
}

JavaScript functionality can be found below:

window.onload = function() {  
    $("#ays-menu a").on("click",function(event){
          if(this.text == "CONNEXION") {
            console.log($(this).attr('href'));
            $("#ays-popin-connexion").toggle(1500);
            $(".modal-backdrop").show();
            console.log(this);
          }
     });
     
    // Clicking outside the popup will close it
    $(".modal-backdrop").click(function(){
        $("#ays-popin-connexion").hide();
    });
}

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

Toggle a button with javascript

My setup involves two switches: <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switch1" checked> <label class="onoffswitch-label" for="switch1"> <span class="onoffswitch-inner"></span> <span ...

javascripthtml

Receiving an empty string from Chrome FileReader when dealing with large files (300MB or more)

Objective: The task is to read a file from the user's file system as a base64 string in the browser The size of these files can be up to 1.5GB Challenge: A script that works flawlessly on Firefox, regardless of the file size On Chrome, the script p ...

javascriptgoogle-chromefilereader

What causes the tweets' IDs to be altered by axios when parsing the response from the Twitter search API?

I am currently utilizing axios to send a GET request to the Twitter search API in order to fetch recent tweets that utilize a specific hashtag. To begin with, I ran tests on the twitter search API via Postman and noticed that the id and id_str tweet statu ...

javascriptnode.jsexpresstwitteraxios

NextJS - The server attempted to execute the find() function, which is only available on the client side

When attempting to utilize the .find method within the server component, I encounter an error. export async function TransactionList() { const transactions = await fetch('/transactions'); return ( <ul> {transactions.m ...

javascriptreactjstypescriptnext.js

Organizing entries based on the quantity of attached documents

I am currently working with mongodb and mongoose. I have a situation where users can create ratings and reviews for products. I want to retrieve the review of the product that has received the highest number of votes. Is this achievable in mongo? The data ...

javascriptnode.jsmongodbsortingmongoose

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss

Calculate the total sum of values in a MySQL column and then group the results

I'm currently working on a quiz website and looking to create a leaderboard. The user scores are stored in a database table named 'user_record' with the following structure: 'user_id' - varchar(254) -holds the user id for a score ...

phphtmlmysqlsql

HTML5 pattern grouping feature is not functioning as expected

I am attempting to validate this regular expression pattern="([a-zA-Z]+[0-9]*){4,}", which essentially means: It must always start with an alphabetic character. If a number is included, there must be at least 4 characters in total; for example, aaaa would ...

regexhtml

Discovering the true width of elements that have overflow hidden in IE7 using jQuery

I am dealing with a dynamic list that contains around 50 elements, but the exact number may vary. <div style="width:465px;"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa& ...

jquerycssinternet-explorer-7

jQuery struggles to process large response

I am currently developing an application that sends requests to a URL and parses the table found in the HTML response using jQuery. While this method works well for smaller amounts of HTML code, it runs into issues with larger datasets. The problem arises ...

javascripthtmljquery

Utilizing GeoLocation in JavaScript: Implementing a Wait for $.ajax Response

Whenever I make an AJAX POST request to my backend server, I aim to include the latitude and longitude obtained from the navigator. However, it seems like the request is being sent in the background without waiting for the navigator to complete its task. ...

javascriptjqueryajax

Customizing the footer on various pages using Footer.php

For the past week, I've been working on updating our mobile site and have encountered an issue with the footer. It loads perfectly fine on the home page but crashes when viewing a regular page. Strangely enough, both pages are using the same footer.ph ...

csswordpress

Transform a jQuery element into an HTML element

I'm facing a dilemma where I have a jQuery element that needs to be passed into a function that only works with HTML elements. How can I efficiently convert the jQuery element into an HTML element? ...

javascriptjqueryelement

Instructions on creating a countdown timer that reveals a hidden div once it reaches zero, remains visible for a set period, and then resets

I created a countdown timer that displays a div when the timer reaches zero. However, I am struggling with getting the timer to reset and start counting down again after displaying the div. For instance, if I set the timer for 7 days and it reaches the de ...

javascriptjqueryhtmlcsstimer

Is there a way to remove specific items from my array in Vue.js?

Essentially, I am using an HTML select element that is populated with arrays of registered users. <label > <b> <i style="opacity:0.8">Users:</i> </b> </label>&nbsp;&nbsp; <select class=&quo ...

javascriptvue.js

Limit access to route in ExpressJS only to internal redirects

I'm managing an ExpressJS application that includes specific routes which I intend to only function when redirected to from my code, rather than input directly into the URL. Essentially, if a user attempts to enter "myapp.com/url" it should not be ac ...

javascriptnode.jsexpressroutes

Unable to retrieve all form properties when using enctype='multipart/form-data'

Recently, my NodeJS server has been successfully uploading files to Amazon using a secret form. However, in an effort to enhance security measures, I decided to introduce a password field to the form. Unfortunately, upon doing so, I encountered an issue wh ...

htmlnode.jsformsexpress

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

javascriptarraysjsonreactjspromise

When attempting to set the keyPath using a variable, an error occurs stating that the keyPath option is not a valid key path

My JSON object, stored in a variable named "jsonObjSuper", is structured like this: { "Watchlist": "My Watchlist", "Instruments": { "instrument1": [ "Company ABC", [ { "snapshotTimeUTC": "2018-11-01T00:00:00", "snapshotTime": "2018/11/ ...

javascriptjsonindexeddb

What are the steps to downloading a server-generated image with user data from the client using Express?

I am facing a challenge with downloading a server-generated image immediately after it is created. My current approach involves using fetch to send user input data (bypassing HTML forms). Although the image is successfully generated on the server, I am str ...

javascriptnode.jsexpressfetch