Using CSS and Jquery to apply a CSS class to a popup window

I've been attempting to assign the CSS class .dialogStyle to a dialog box, but for some reason, it doesn't seem to be taking effect.

<!doctype html>
<head>
  <meta charset="utf-8" />
  <title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <style>
.dialogStyle .ui-dialog { font-size: 62.5%; 
                          background-color: red;
                        }


  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>
  $(document).ready(function() {
    $( "#update-dialog" ).dialog({
      autoOpen: false,
      dialogClass: 'dialogStyle',
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Update": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
    $(".update-button").click(function () {
        $("#update-dialog").dialog("open");
    });
});
  </script>
</head>
<body>

<div id="update-dialog" title="Update COMMON_NAME">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<button class="update-button">Update COMMON_NAME</button>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>

The issue persists where the CSS is not being applied to the ui-dialog as expected. Interestingly enough, substituting ".ui-dialog" with ".ui-dialog-titlebar" does offer some styling (specifically to the titlebar).

 <style>
    .dialogStyle .ui-dialog-titlebar { font-size: 62.5%; 
                  background-color: red;
                }

 </style>

I'm puzzled as to why setting dialogClass doesn't affect .ui-dialog but does impact .ui-dialog-titlebar. According to this resource (refer to section titled "Theming"), both .ui-dialog and .ui-dialog-titlebar are classes of the dialog box.

Answer №1

There is an element that has both the classes dialogStyle and ui-dialog. The dialog class attribute is set to

ui-dialog ui-widget ui-widget-content ui-corner-all dialogStyle ui-draggable ui-dialog-buttons
.

Check out this code snippet:

.dialogStyle.ui-dialog {
    font-size: 62.5%;
    background-color: red;
}

Here's a demo: Fiddle - There are some unresolved CSS issues in this demo.

Answer №2

.customStyle .ui-customDialog { 
 font-size: 60% !important; 
 background-color: crimson !important;
}

Have you experimented with this approach?

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

Sticky full-height slider with horizontal scrolling

I've been working on creating a horizontal slider animation that smoothly scrolls, inspired by the one showcased on The slider on weltio remains sticky as you scroll, showcasing images and content within. On my page, I have a lot of content and my g ...

Two DIV elements are merging together with a cool zooming effect

As a beginner in using Bootstrap 4, I am working on creating a practice website. While designing the layout, I encountered an issue that seems simple but I can't seem to figure it out. <div id="box-container" class="container-fluid"> &l ...

Tips for embedding 2 rows within a <td> element in a DataTables table

Here's a unique layout I want to achieve using the DataTables plugin. https://i.sstatic.net/YxfOk.png Notice how the address spans across 3 columns. This html code disrupts the sorting feature of DataTables and causes the table to shift. Here&apos ...

Organizing CSS DIV code by sections for desktops and mobile devices

My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...

Implementing a dynamic like functionality using Ajax in Django

I've created a new structure for the like button, but it's not functioning correctly. Here are the files I'm working with: models.py class Comment(models.Model): title = models.CharField(max_length=50) author = models.ForeignKey(Pr ...

How to Add Motion to Several Markers

Exploring the concept of moving markers on a map with drawn polylines to simulate simultaneous movement is a fascinating challenge. However, encountering some difficulties, such as only the last marker moving while the others remain stationary, can be frus ...

I'm seeking a way to access the input element within the InputGroup component of BlueprintJs in my

The BluePrintJS React InputGroup component offers a convenient user interface for modern applications. However, it does not provide direct access to the internal <input> element. There are two primary reasons why I need to access the input element: ...

Unusual CSS inconsistencies between running on VS Web Server and IIS

My current dilemma involves a discrepancy in the appearance of my site when viewed locally through the visual studio web server (http://localhost:3452/) compared to when accessed on IIS7 (http://server/myproject/). Initially, I suspected a CSS issue causi ...

Having issues with AJAX and .change() function not functioning correctly?

I am working on two drop-down menus. The first menu displays the provinces in the country, and when a province is selected, the second menu should show the districts within that province. The following code is for displaying the provinces: $(document).re ...

Issues with the Dropdown Menu

I'm currently working on a dropdown menu and I've encountered two issues. When I hover over the links in the main navigation bar (such as 'about' and 'connect'), only the actual words are clickable, not the entire area tha ...

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Navigate to the following slide by clicking on BxSlider

Looking to enhance the navigation on my slideshow by using the slide itself as a next button, instead of relying on traditional prev/next controls. Although it seems like a simple feature to implement, I'm struggling to make it work. This is my curre ...

How can I store Ajax data in integer format?

I am attempting to retrieve data from a PHP page using ajax and then save it in a variable that will be used in a while loop. I have successfully displayed the number on the screen, confirming that the data retrieval is functioning. However, I am encounte ...

Utilizing jQuery autocomplete in an onKeyup event handler

Looking for a way to display the results of a jQuery function. As the user types in the search field, a function is triggered which retrieves data from the database. I can view the retrieved data using an alert function. <input type="text" n ...

retrieve the information stored in the rows of the table

Here is the arrangement, with numerous div class="extra" elements in my project. <div class="extra"> <table width="90%"> <colgroup> <col width="40%"/> <col width="30%"/> <col width="30% ...

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

Creating a dynamic matrix layout with CSS

On my e-commerce site's product display page, I am facing some alignment issues. There will be around 100 products on this page and I want to display them in a matrix format. <div style=" margin: 0 auto; width:640px; text-align: left"> &l ...

JavaScript validation for a form dynamically generated within a table

NOTE: Utilizing Foundation 6 along with the Abide Form Validation. I'm currently working on implementing automatic form validation for a website. The approach I've taken involves creating a table (using the jQuery Datatables library) with multip ...

jquery makes it easy to create interactive hide and show effects

The main concept is to display the element upon clicking and hide it when there is any mouse click event. Below is the HTML code I'm using: <ul> <li> <span class="name">Author 1</span> <span class="affiliation"&g ...

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...