Is it possible to customize the CSS styles of a jQuery UI modal dialog box?

Having trouble with my CSS styles not applying to a dialog modal added to my website using jQuery UI, even when using '!important'. I suspect that the predefined jQuery or UI CSS styles from a CDN link are preventing me from overriding them. The issue arises because the pop-up modal clashes with the site's CSS style. My goal is to give the modal a white background and blur the rest of the site until the user clicks outside the modal or closes it using the 'X' icon.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Hebrews 13:3 Prison Ministry</title>


    <link rel="stylesheet" href="styles.css">   
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0801001a0f190b1d01030b43081c0b0b2e5b405f5b405a">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,100&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
      <script>
      $( function() {
        $( "#dialog" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "fold",
            duration: 1000
          }
        });
     
        $( "#opener" ).on( "click", function() {
          $( "#dialog" ).dialog( "open" );
        });
        
        
      } );
      </script>
         
    
</head>

<body>

<!------ SECTION 1: HOME -- Header Class ------>
<a id="header"></a>
<section class="header">
    <nav>
        <a href="index.php"><img src="hb13/logo.png" /></a>
        
        <div class="nav-links" id="navLinks">
        
                <div class="search-login">
                    
                    <div class="search">
                        <form action="#" method="POST">
                            <input type="text" placeholder="Search this site" name="search" >
                            <input type="submit" value="Search" for="search" class="submit"> 
                        
                        </form>
                    </div>
                    
                    <!------ Opens Sign in/up Modal ------>
                    
                    <div class="login">
                        <a href="#" id="opener">Login | Register</a>
                    </div>
                    
                    <div id="dialog" title="Basic dialog">
                      <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
                    </div>

                </div>  
                    
                    
                <ul>
                <i class="fa fa-times" onclick="hideMenu()"></i>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#services">SERVICES</a></li>
                    <li><a href="#charity">CHARITY</a></li>
                    <li><a href="#updates">UPDATES</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>   
            <i class="fa fa-bars" onclick="showMenu()"></i>
            
            
            
        </div>
        <div class="text-box">
            <h1>Hebrews 13:3</h1> 
            <h2>Prison Ministry</h2>
            <p>"Remember those in prison, as if you were there yourself. <br>Remember also those being mistreated, as if you felt their pain in your own bodies." <br><br>- Hebrews 13:3 NLT -</p>
            <a href="" class="hero-btn">Click Here to Veiw More</a>
        </div>
    </nav>
</section>
<hr>
  
<!-- SECTION 2:  -->
<a id="about"></a>
<section class="about">
    <h1>About the Ministry</h1>
    <p>The Book of Hebrews in chapter 13 verse 3 speaks of remembering those in prison as if you were there yourself.<br> The founder of this ministry was in prison. That is where he found Christ, and that is where he saw the desparate need for Christ in the lives of those in captivity.<br> Captivity is a double edged sword, since it is possible to be a captive to no fault of your own, or to make yourself a captive. The thing is that- whether innocent or guilty- ALL people need Christ.<br><br> It is easy to to think of God as a mere crutch that get us through difficult times. It is easy for us, when things are going relativley well, to forget the need for a Source of Power.<br>  </p>
    
    <div class="row">
        
        <div class="about-col">
            <h3>Text</h3>
            <p>text</p>
        </div>
        
        <div class="about-col">
            <h3>Text</h3>
            <p>text</p>
        </div>
        
        <div class="about-col">
            <h3>Text</h3>
            <p>text</p>
        </div>
    
    
    </div>
</section>

<a href="#header" class="align-right">Back to Top</a>
<hr>
  
<!-- SECTION: SERVICES -->
<a id="services"></a>
<section class="services">
    <h1>Services</h1>
    <p>text</p>
    
    <div class="row">
        
        <div class="services-col">
            <img src="hb13/bible_image(5).jpg"/>
            <div class="layer">
                <h3>Prayer Requests and Tools</h3>
            
            </div>
        </div>
        
        <div class="services-col">
            <img src="hb13/bible_image(4).jpg"/>
            <div class="layer">
                <h3>Bible Studies and Bibles</h3>
            
            </div>
        </div>
        
        <div class="services-col">
            <img src="hb13/bible_image(2).jpg"/>
            <div class="layer">
                <h3>Other Services</h3>
            
            </div>
        </div>
    
    
    </div>
</section>

<a href="#header" class="align-right">Back to Top</a>
<hr>
  
<!-- your content here... -->
<a id="charity"></a> 
<section class="charity">
    <h1>Charity</h1>
    <p>text</p>
    
    <div class="row">
        <div class="charity-col">
            <img src="hb13/charity(1).jpg" class="resize">
            <h3>IMG</h3>
            <p>text</p>
        </div>
        
        <div class="charity-col">
            <img src="hb13/charity(2).jpg" class="resize">
            <h3>IMG</h3>
            <p>text</p>
        </div>
        
        <div class="charity-col">
            <img src="hb13/charity.jpg" class="resize">
            <h3>IMG</h3>
            <p>text</p>
        </div>
    
    </div>
</section>

<a href="#header" class="align-right">Back to Top</a>
<hr>  

<!-- your content here... -->
<a id="updates"></a>
<section class="updates">
    <h1>Updates</h1>
    <p>text</p>
    
    <div class="row">
        <div class="updates-col">
            <img src="hb13/me_1.jpg">
            <div>
                <p>text</p>
                <h3>IMG</h3>
            
            </div>
        </div>
        
        <div class="updates-col">
            <img src="hb13/me_3.jpg">
            <div>
                <p>text</p>
                <h3>IMG</h3>
                <!-- i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i -->
            </div>
        </div>
</section>

<a href="#header" class="align-right">Back to Top</a>
<hr>

<!-- your content here... -->
<a id="contact"></a>
<section class="contact">
    <h1>Contact Us</h1>
    <a href="#" class="hero-btn">Contact Us</a>
</section>
<a href="#header" class="align-right">Back to Top</a>
<hr>

<!-- your content here... -->

<section class="footer">
    <h4>Links</h4>
    <p>footer text</p>
    <div class="icons">
        <a href=""><img src="hb13/fb.png"></a>
        <a href=""><img src="hb13/twitter.png"></a>
        <a href=""><img src="hb13/youtube.png"></a>
        <a href=""><img src="hb13/in.png"></a>
    
    </div>
    <p>Made with Love by Magdi Kanaan</p>


</section>
        

  <script type="text/javascript">
        
        var navLinks = document.getElementById("navLinks");
        
            function showMenu() {
                navLinks.style.right = "0";
            }
            function hideMenu() {
                navLinks.style.right = "-200px";
            }
  </script>
</body>
</html>

Understandably, I'm trying to address two specific issues:

1.) How to override the CSS styles for the Modal Pop-up considering the likelihood of pre-set styles from the jQuery or jQuery UI CDNs.

2.) How to implement a visual effect that blurs the remainder of the site while the Modal is active.

javascripthtmljquerycss

Answer №1

I tested your code on my system and confirmed that the CSS is being applied to the modal. https://i.stack.imgur.com/Q6lNF.png

Have you tried clearing your browser cache?

If not, here's the exact code snippet you need:

// Quick & dirty toggle to demonstrate modal toggle behavior
$('.modal-toggle').on('click', function(e) {
  e.preventDefault();
  $('.modal').toggleClass('is-visible');
});
[CSS SNIPPET HERE]
[/CODES OMITTED]

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 ngx-bootstrap Modal for Data Transfer to Component

I am currently dealing with an array called drivers in my component. When a button is clicked in the component, it triggers a ngx-bootstrap modal to display the fullname value from the drivers array. Now, I am looking for a way to retrieve the selected nam ...

htmlangularmodal-dialogngx-bootstrap

Create a sleek and uniform design with Bootstrap by setting up three columns that maintain the same height

I am attempting to design a 3 column div that maintains equal height for all responsive rows, each containing an ICON and information. <div class="container"> <div class="row row-eq-height"> <div class="col c ...

htmlcssbootstrap-4

Creating a simulated RESTful backend using Sinon.js for an Angular.js project

In the process of developing my Angular.js application, I am incorporating RESTful services that utilize the $resource service. While this app will eventually connect to a Java Spring application, I am currently focusing on creating an isolated mock server ...

javascriptjsonangularjsxmlhttprequestsinon

Content not appearing in ng repeat loop

I'm facing a basic issue that I can't seem to solve - my code isn't working as expected: <article id="desktop"> <h3>Content: </h3> <ul> <li ng-repeat="x in storage"> name: {{x.name}} ...

javascriptangularjs

Switch between Fixed and Relative positions as you scroll

Just a small adjustment is needed to get it working... I need to toggle between fixed and relative positioning. JSFiddle Link $(window).on('scroll', function() { ($(window).scrollTop() > 50) ? ($('.me').addClass('fix ...

javascriptjqueryhtmlcss-position

Tips for effectively testing an Angular directive

I'm having trouble testing an Angular directive due to encountering the following unexpected error: Error: Unexpected request: GET /api/players/info It seems that the issue may stem from references to my controller within the directive definition ob ...

javascriptangularjsunit-testingjasminekarma-runner

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

cssimagesasspath

The Material UI Elements are not displaying properly as expected. Instead of seeing the MUI elements, a tan box is appearing. What steps can I take to resolve this

I'm currently using Material UI to build a basic header, footer, and profile page. However, whenever I attempt to display any type of element (such as Menu, Appbar, Toolbar, IconButton, Tab, Tabs, etc.), the page only shows a tan box instead of the a ...

javascriptreactjsmaterial-ui

"Troubleshooting WordPress website: issues with CSS and images not

I recently developed a custom WordPress theme and everything was working perfectly on my local machine. However, when I moved the theme to the server, the CSS and images are not displaying properly. Strangely enough, when I checked the 'view source&ap ...

phphtmlcsswordpresswordpress-theming

What is the best way to adjust the decimal values in my API calls?

Is there a way to adjust the numerical data returned by the API to display only two decimal places instead of three? For example, if the number is 140.444, I want it to show as 140.44 What changes do I need to make? function fetchData() { fetch(" ...

javascripthtmlcssfetch-api

Understanding the unpredictability of A-Sync in Node.js/Express: Why does it appear to operate in a non-linear fashion?

Recently, I delved into the world of Node.js/Express and encountered asynchronous calls that must complete before moving on. My code features three different endpoints that need to be hit. Considering the asynchronous nature, I attempted to structure my c ...

javascriptnode.jsexpress

When converting to HTML, LibreOffice Writer fails to display footers on even-numbered pages

I'm currently facing an issue with converting my HTML form to PDF using LibreOffice. I need to include a footer in the document, but for some reason, only odd-numbered pages display the footer. Even-numbered pages are not showing anything at all. Int ...

htmlfooterlibreoffice

Pagination in Datatables

Here is the code snippet I am working with: $('#ldap-users, #audit-users').dataTable({ "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p& ...

javascriptjqueryjquery-pluginsdatatables

Django Ajax filter displaying issue on HTML page

I'm uncertain about the correctness of my Ajax implementation. When using Django's built-in tags, the objects I pass through Ajax are not appearing on my template HTML page. view_results.html <div> <input id="search" name="search" t ...

javascriptjquerypythonajaxdjango

Component failing to refresh with each key modification

My understanding is that adding a key attribute to a component should make it reactive when the key changes. However, with a v-navigation-drawer from Vuetify, this doesn't seem to have any impact. I've tried making arbitrary changes to the logge ...

javascriptvue.jsvuetify.js

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

javascriptjqueryhtmlcssmobile-website

Troubleshooting a TypeScript Problem with React Context

In my AppContext.tsx file, I have defined the following import React, { useState, createContext } from "react"; import { Iitem } from "../utils/interfaces"; interface AppContext { showModal: boolean; setShowModal: React.Dispatch< ...

javascriptreactjstypescriptnext.js

Invoke Angular scope function from index.html using href

I have a user controller that contains a logout function. I am trying to figure out how to call this logout function using a hyperlink in my index.html file. Just to clarify, I am currently using yeoman as well. The hyperlink is located within the navigati ...

htmlangularjsyeoman

Tips for utilizing console log within a react form component

I'm currently exploring ways to communicate with a React form in order to provide it with an object.id for updating purposes. While I can successfully console log the object.id within the update button and modal, I am struggling to confirm if the val ...

javascriptreactjs

Navigating the world of date pickers: a deceptively easy challenge

Take a look at this fiddle example to get started: http://jsfiddle.net/1ezos4ho/8/ The main goals are: When a date is selected, it should be dynamically added as the input value, like <input type text value="date selected".... Update: <s ...

javascriptjqueryajaxhtml