The close button on the modal is malfunctioning

I am currently facing an issue with a simple modal window that opens when a link is clicked and should close when the user clicks on the close button, represented as a red rectangle in my fiddle.

You can access my fiddle through this link

Below is the relevant code snippet :

// prize modal
$('.modal').on('click',function(){  
    if(!$('#prize-modal').hasClass('open')){
        $('#prize-modal').css('opacity',0.7);
        if($.browser.msie){
        $('#prize-modal').css('opacity','null').css('display','block').addClass('open');
        }else {
        $('#prize-modal').css('opacity',0).css('display','block').addClass('open').stop().animate({opacity: 1}, 500);
        }
    }
    return false;
}); 

// .close the class that you want to trigger the modal clossing

$('.close').on('click',function(){
    if($.browser.msie){
        $('.open').css('opacity','null').css('display','none').removeClass('open');
    }else {
        $('.open').stop().animate({opacity: 0}, 500,function()
        {
        $('.open').css('display','none').removeClass('open');
        });
    }
});

I am struggling to understand why the functionality of the "close" button is not working.

Answer №1

`A TypeError has occurred: 'undefined' is not an object (evaluating '$.browser.msie')` 

Important Update Regarding jQuery.browser()

The jQuery.browser() method was officially deprecated starting from jQuery version 1.3 and has been completely removed in version 1.9. If necessary, it can still be accessed through the jQuery Migrate plugin available on GitHub. It is recommended to utilize feature detection using libraries like Modernizr instead.

Source: http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed

Check out the updated code snippet on this fiddle: http://jsfiddle.net/zwN6R/31/

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

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...

Tips for disregarding global CSS in Nuxt.js?

I've been utilizing a boilerplate that integrates with the CoreUI template from GitHub, and it's been working well. However, I am now looking to customize my index page with a unique style, and I'm encountering issues where the global CSS fr ...

Mediawiki version 1.26.2 experiencing loading issues with Stylesheet

I recently updated my Mediawiki installation to the latest version 1.26.2, but I've encountered an issue with the stylesheet not loading correctly. Strangely enough, in a previous version (1.23.5) installed on the same server, everything was working f ...

Setting the alignment to the right for the select attribute within HTML

I have been attempting to align a select attribute in HTML to the right side of the page, but so far I have been unsuccessful. Below are the codes that I have tried: <!DOCTYPE html> <html> <body> <h1>Java Casting</h1> ...

What is the best way to merge two JSON values with the help of jQuery?

Two JSON Objects are provided below: The first one is: [{ "id": 5001, "count": "0", "type": "None" }, { "id": 5002, "count": "0", "type": "Glazed" }, { "id": 5005, "count": "0", "type": "Sugar" }, { "id": 5003, ...

Having trouble uploading a file with sendkeys to a button element inside an iframe using Selenium in Python

[Technology]: Python + Selenium I am currently attempting to upload a local file using the upload file button. Initially, I tried to locate the element and click on the button, which was successful with the following code: driver.switch_to_frame("upload ...

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Attempting to update data in an HTML table using D3 has proven to be quite challenging for me. My task involves changing the data in multiple columns, adjusting the number of rows, and animating SVG elements in each row based on new data arrays. Despite tr ...

The rendering of CSS is altered when being processed by IIS

It appears that this issue is not specific to any browser and generally affects styling in various webkit/gecko/mozilla styles. For instance, when I create a website mockup and implement a style like: element.class { border-radius: 5px; -moz-bor ...

Viewing the information stored in a text file hosted on a web server

I need help enhancing the functionality of a webpage on my server. Specifically, I want to display the contents of a text file saved on the server. I am struggling with the syntax, but it seems to involve using Flask along with HTML and JavaScript function ...

Can we limit the text in a specific cell to one line on a desktop for a responsive table?

I am facing a challenge with making the second cell in my table have a width of 100% while ensuring that the text stays on one line. While the mobile version is functioning correctly, I am struggling to find a solution for the desktop version as the last ...

Comparison: JavaScript Cookies vs PHP Cookies

I have been trying to implement the following code: JS: Cookies.set(post_id + '_' + user_ip, post_id + "_" + user_ip, { expires: 1 }); PHP: $cookie_str = $post_id.'_'.get_client_ip(); if (isset($_COOKIE[$cookie_str_]) ){ print_r ...

How can I collect various values from input fields that are within a foreach loop using jQuery?

<script> $("#submit").click(function(e){ e.preventDefault(); subjectID = $("#subjectID").val(); subject = $("#subject_"+subjectID).val(); subject_code = $("#subject_code_"+subjectID).val(); internal_marks = ...

Is it possible to manipulate the carousel image within the div element?

I am working on a Bootstrap code snippet that showcases an image using the w-100 class to span the full width of the page. However, the challenge I'm facing is making sure the image is visible to users while keeping it small enough so they won't ...

The data being transmitted by the server is not being received accurately

Hey there! I've recently started using express.js and nodejs, but I've encountered an issue where my server is sending me markup without the CSS and JS files included. const express = require('express'); const app = express(); const htt ...

Dealing with Oversized Images in Jcrop: Tips and Tricks

Utilizing Jcrop for cropping images, everything runs smoothly with small images. However, when I attempt to use large images like 2080x2080 or 1600x1600, it takes up the entire screen and cannot be controlled by CSS properties such as width and height in t ...

Executing a function within a ng-repeat iteration

Is there a way to call a method within an ng-repeat loop, even if the element does not exist at that moment? I'm facing this issue and I'm not sure how to resolve it... The ID seems to be correct. Strangely, when I run it in the console after ev ...

What is the most effective method for developing HTML with PHP or Jquery?

My JavaScript Object contains some important information that I need to display. I have two possible options for generating the HTML from this object. I am unsure which method is the most appropriate, or if it is simply a matter of personal preference. 1 ...

Easy steps to include HTTP authentication headers in Spring Boot

I have been customizing my spring boot authorization server to fit my needs. Upon logging in with a username and password from my custom HTML page, I am aiming to redirect back to the /oauth/token endpoint to retrieve the access token. While this process ...

Ensuring website responsiveness beyond just the carousel

I found a carousel (inspired by: https://codepen.io/dobladov/pen/kXAXJx) that fetches images from an API. The carousel will switch images as you click on a different image or use the "previous" or "next" buttons. While there are many examples of putting te ...

What is the best way to increase the size of this text when an image is hovered over?

I'm looking to make the .thumb_text element grow when hovering over the <img> within the li.thumb_list. Currently, I can only achieve this effect when hovering over the text itself, not the image. In addition, the text is inexplicably becoming ...