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

Understanding the concept of inertia within the OrbitControls feature of ThreeJS

I have implemented THREE.OrbitControls to rotate my objects in a project. Yet, I am interested in incorporating some inertia for the camera rotation so that it gradually comes to a stop after the user stops moving the mouse. What would be the best approa ...

javascriptthree.js

Error message in Leaflet JS: Unable to access property 'addLayer' because it is undefined when trying to display drawnItems on the Map

My attempt to showcase a Leaflet Map with polygon-shaped surfaces encountered an issue. Sometimes, I face the error "cannot read property 'addLayer' of undefined," but when the page is refreshed, the map renders correctly. I am unsure where I wen ...

javascriptreactjsleafletleaflet.draw

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

I'm facing a situation where I need to apply ng-style (or ng-class) multiple times depending on a variable. However, this repetitive task of writing ng-class for the same functionality for each widget is quite cumbersome for me. Is there a way to si ...

javascriptcssangularjsangularjs-directive

Is there a way to make this eval() function function properly in Internet Explorer?

My JavaScript code is fetching another JavaScript "class" from a different XHTML page. The fetched JavaScript looks like this: (function() { this.init = function() { jQuery("#__BALLOONS__tabs").tabs(); }; }) Once the f ...

javascriptjqueryeval

I am trying to center align this image, but for some reason, it's not cooperating

Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...

htmlcss

Ensuring that localStorage objects continue to iterate when clear() is called within the same function

When a user completes the game loop or starts a new game, I want to clear all local storage while still keeping certain values intact. Currently, I am able to do this for sound volume values: // code inside a conditional statement triggered when starting ...

javascriptjsonlocal-storage

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

javascripthtmlcsscanvas

To combine arrays A and B within a React useState object, simply pass them as arguments when initializing the state

Currently, I am working on integrating infinite scroll functionality in React, where I need to fetch data from a backend API for loading content on the next page. The challenge I'm facing is that my state is set as an object using useState, and I need ...

javascriptnode.jsreactjsreact-hooksuse-state

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

jqueryasp.net-mvcposthtml

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

javascriptphphtmlajax

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

javascripthtmlcssuser-interfaceslider

How can one set relative paths for links when including a file from a different directory that contains links?

My project directory is structured as follows: root css img src login login.php dashboard basic header.php footer.php profile.php manage.php department ...

phphtmlrelative-path

Creating a radial gradient texture using CSS

I'm encountering an issue with my radial gradient and texture combination. Here is the code snippet I am using: background-image: url('../img/texture.png'); /* fallback */ background: -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(2 ...

css

Encountering an error while trying to update a field using the $inc operator in

Currently, I am working on updating a field in my database to increment it each time like a counter. This will allow me to consistently receive the latest values. To achieve this, I have defined the following schema: var CounterSchema = new Schema({ _id: ...

javascriptnode.jsmongodbmongoosemongodb-query

Tips on ensuring the <script> section of a Vuejs single file component loads prior to the <template> section

After posing my query here, I have come to the realization that the root of my problem might be due to the template loading before the script. This causes an error when it encounters an undefined variable, halting the script execution. The issue could pote ...

javascriptvue.jsvuejs2vue-component

Bidimensional Selenium matrix

Could someone please help me understand how to extract values from a bi-dimensional array using Selenium? I have a resources.js file with the array created, and need to access it in Selenium. Here is the structure of the array: The array consists of 4 col ...

javascriptarraysseleniummatrixselenium-ide

EventBus emitting multiple times until the page is refreshed

Trying to make use of the EventBus in Vue.js to transfer data from one method to another. In my setup, I've got two methods named one() and two(). Here's how I'm implementing the EventBus: one() { EventBus.$emit("this:that", data); } And ...

javascriptvue.js

How to utilize a specific option as a variable within a PHP select dropdown menu

In my PHP code, I am retrieving data from an Azure SQL database and using it to populate a drop-down menu with options. The SQL query I used returns two columns: Title and Cycle_ID. After setting the Title as the text string and Cycle_ID as the value for ...

phphtmlsql

Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text Here is the HTML code snippet in question: <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a> The issue is that I a ...

htmlcsslighthouse

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

htmljquerycss