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

Error: Invalid parameter detected for Shopify script-tag

I'm encountering a persistent error message stating { errors: { script_tag: 'Required parameter missing or invalid' } } This issue arises when attempting to upload a script tag to a storefront. Currently, I'm just experimenting with s ...

javascriptexpressshopify

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

Firebase Operation Not Supported Error in next.js (auth/operation-not-supported-in-this-environment)

After successfully deploying a Next.js app hosted on Vercel with Firebase authentication that functions properly for users, I encountered a mysterious error during the "npm run build" phase: FirebaseError: Firebase: Error (auth/operation-not-supported-in ...

javascriptnode.jsfirebasenext.jsfirebase-authentication

Exploring the enhanced capabilities of FeathersJS by integrating express-babelify-middleware

Attempting to integrate express-babelify-middleware with FeathersJS, an error message appears in the browser console: The error reads: ReferenceError: main_run is not defined This indicates that babelify may not be functioning correctly or I might be u ...

javascriptnode.jsexpressfeathersjs

Calculate the total sum of input values using jQuery

Here is the HTML I've been working with: I am trying to create a script where one textbox will display the total amount, and another textbox will display the following data: "name": [{ "id": 3, "qty": 2 }, { "id": 4, "qty": 5 }] Here's ...

javascriptjqueryhtml

transforming a text input into unadorned plain text

Currently, I am in the process of creating a small HTML form that consists of a single textbox input. Once the user enters text into this textbox and clicks on a button located at the end of the page, I would like the textbox to transform into normal plain ...

javascriptjqueryhtml

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

Unsubscribe from the Event Listener in Node.js

In light of this inquiry (linked here), can the Listener be eliminated from within the callback function? To illustrate: let callback = function(stream) { if(condition) performAction(); else server.removeListener('connection', cal ...

javascriptnode.jsdom-events

The Proper Usage of Commas in CSS

Check out this CSS code snippet. .form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;} .form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} .form-field TEXTAREA {height ...

htmlcsscss-selectors

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

Inner box shadow obscured by a sibling div

I am facing an issue with a div that has an inner box shadow being covered by another div. I have tried using position: relative, but it did not solve the problem. Here is an example: CODE EXAMPLE .example-div{ background:#fff; color:#000; ma ...

htmlbox-shadow

How to manually close the modal in Next.js using bootstrap 5

Incorporating Bootstrap 5.2 modals into my Next.js application has been smooth sailing so far. However, I've encountered an issue with closing the modal window after a successful backend request. To trigger the modal, I use the data-bs-toggle="modal" ...

javascriptreactjstwitter-bootstrapnext.jsbootstrap-5

Attempting to retrieve the current time using JavaSscript

const currentTime = new Date(); const hours = now.getHours(); Console.log(hours); This block of code is returning an error message... Uncaught ReferenceError: now is not defined Please note that this snippet is written in JavaScript. I attempted to us ...

javascripthtmlnode.jsjsondynamics-al

A numerical input field that removes non-numeric characters without removing existing numbers?

Currently, I have implemented the following code: <input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')"> This code restricts users from entering anything other than numbers into a field on my webpage. However, I hav ...

javascriptjqueryhtml

Vertical alignment with flexbox not functioning properly in Internet Explorer 11

I am attempting to use flex to center an icon within two divs. Below is the code snippet: .div-1 { width: 50px; height: 50px; display: flex; border-radius: 50%; background-color: #228B22; } .div-2 { margin: auto; } i { color: #ffffff; } &l ...

htmlcssinternet-explorerinternet-explorer-11

Measure the loading times of external web pages using JavaScript

I am seeking a minimalist approach to create a webpage on my server that utilizes JavaScript to calculate the loading time of the login page on various remote URLs/servers. These servers are dispersed globally, and my aim is to determine the quickest one f ...

javascriptjqueryajax

Creating a dynamic list filter using JavaScript and three select boxes

Looking for a way to implement a similar feature to the one on this webpage: I will be showcasing a list of brands on the page, with each brand requiring three pieces of information: Starting letter Store (multiple options) Category (multiple options) ...

phpjavascripthtmlwordpress

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

Is it possible to set up multiple registries within a single package.json configuration?

Is it possible to define two different registries within the publishConfig section of the package.json file? The scenario is that we want to publish the artifact to two different locations depending on its purpose. For SNAPSHOT versions, we would like to ...

javascriptnpmartifactorypackage.json

Create custom components by wrapping npm components and exporting them as a single custom component

Encountering issues while installing 3rd party components from npm. For instance, a dropdown react module that can be used easily in my own module; however, I find myself needing to declare its style and other dependencies in multiple modules. For example ...

javascriptreactjsnpm