Change the color of the dialog close button

I am struggling to add color to my close button in the dialog box.

Here is the code for the dialog box on JSFiddle:

function fnOpenNormalDialog() {

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
       //title: "Modal",
        height: 200,
        width: 300,
        create: function (e, ui) {
            var pane = $(this).dialog("widget").find(".ui-dialog-buttonpane")
            $("<label class='remember_me' ><input type='checkbox' id='remember'/ > Do Not Show this again</label>").prependTo(pane)
        },

        open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar').hide();
},
        buttons: {          
            "Close": function() {
            $(this).dialog("close");
        },
      class:"ui-button-spl1"
        }
    });
}

Below is my CSS for the button. Please help me figure out how to apply this class to get the desired color:

   #dialog-confirm {
   display:none
  }
    .ui-dialog-buttonset .ui-button-spl1{
    background:green;
  }

Answer №1

To modify the appearance of the button, you can update your css as follows:

#dialog-confirm {
   display:none
  }
  .ui-dialog-buttonset .ui-button{
    background:green;
  }

By adding this code snippet, the button will now have a green background color. Additionally, it seems that there is an unused class "spl1" in the css file.


Alternatively, you can use the addClass method to apply a new class to the button:

open: function(event, ui) {
    $(this).closest('.ui-dialog').find('.ui-dialog-titlebar').hide();
    $(this).closest('.ui-dialog').find("button").addClass("ui-button-spl1");
},

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

The issue of jquery noConflict not functioning properly in a php include() statement is

Having trouble with jquery.noConflict not working when loading from an external file using php includes? Also noticing that some scripts may not be fully loading as well. Mainfile.php <script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"& ...

Validating Form Inputs with Multiple Button Options

I currently have a form with multiple buttons that trigger PHP processing. The existing code for the buttons is as follows: <button id="btn_back" class='ym-button ym-success' name="action_back">Back</button> <button id="btn_finis ...

What is the best way to design an element in HTML/CSS with a curved semicircle border at the top?

I'm looking to design an HTML/CSS element that features a semicircle at the top-middle with a border. Inside this semicircle, I want to place a smaller circle containing a single character (similar to the X in the provided image). Additionally, there ...

Adjusting the space between horizontal rule lines

After following an online tutorial, I managed to put together the following HTML template: body { font-weight: 200; font-size: 14px; } .header { font-size: 20px; font-weight: 100; text-align: center; color: #007cae; } .title { font-size: ...

I am having trouble getting pagify.js to function properly

Looking to incorporate the pagify.js plugin into my website by following the steps on Github. After downloading the repo, I tried opening the index page in Chrome for a preview, but encountered errors (see image). https://i.sstatic.net/WHOWS.png Need h ...

Optimal approach for displaying information on a webpage using AJAX requests

When it comes to loading details of an item on-click within a pre-defined div, I have two different approaches in mind. Note: Backed by Python/Django and utilizing jQuery on the frontend Option I Views.py def retrieve_item_data(id): obj = MyClass.o ...

What are the steps to achieve a smooth transition from a background-image to transparency?

Take a look at this related image: The goal is to replicate the design shown on the right side of the image. However, there's also a parent container with its own background image, as opposed to a solid color. Any guidance on how to achieve this? U ...

Guide on utilizing AJAX and Jquery for redirection purposes

I am a beginner in Ajax and I came across this question before, but I am experiencing an issue in the Chrome console. Here is the PHP code snippet: $rs1 = [ 'error' => $blank_err, 'url' => "http://localhost/expe ...

What causes the unexpected behavior of MatPaginator within an ngIf statement?

CHECK OUT MY STACKBLITZ DEMO Here's the material table setup I'm working with: <table mat-table [dataSource]="dataSource" > ... Rows ... <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row * ...

Retrieving the chosen option from a dropdown menu without the need for a page

Currently, I am facing an issue with the view limit dropdown on my page that contains multiple filters for searching data from a Database. At the bottom of the page, there is a view limit dropdown separate from the main search form. This dropdown allows us ...

Tips for customizing the appearance of the active item in the navigation bar

Currently, I am developing a project with React.js using HTML, CSS, and JavaScript. My goal is to enhance the visual appeal of the active navigation item in the navbar by adding a white border around it. This way, the border will remain visible while the c ...

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

"Seamless payment processing and gratitude display in PHP and JavaScript checkout and

I am currently working on integrating a Stripe checkout for my ecommerce website as part of my latest project. Everything seems to be functioning well, but I have a few questions that are causing some confusion. Is it a good idea to use AJAX for the che ...

Combining jQuery Functions

I am looking for a way to streamline the code for my buttons and div elements. I have 30 buttons labeled from #p3-btn to #p30-btn, each corresponding to a different effect on the div elements with classes .p3 to .p30. Is there a more efficient way to achie ...

What's the reason Google Chrome doesn't support this JavaScript syntax?

When setting up a JavaScript/jQuery click listener, I followed this format: $("#test").on("click", () => { console.log("test"); }); While this code functions without issue in Firefox, it throws a Syntax error in Chrome. I'm puzzled by this di ...

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Does anyone know how to create a dynamic character using css, html, and javascript, and detect collisions with other elements? Any suggestions or guidance would be greatly appreciated. ...

"Encountering a problem with a missing object in jQuery when referencing

I'm encountering an issue with jQuery's $(this) object that's causing me to lose track of the this element in my code: $('.star').click(function (){ var id = $(this).parent().attr('id').split('rating')[ ...

The Bootstrap model popup darkens the screen, but there are a few areas that remain at the same level of brightness and do not get dim

https://i.sstatic.net/09QtK.png Within my Angular 7 project, I have implemented a Bootstrap modal. However, I am facing an issue where only components with position: relative are darkened when the modal is opened. Some components have position: fixed, as ...

On one webpage, IE 11 is correctly styling certain visited hyperlinks while failing to do so for others

Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations. Issue I'm encountering a problem where some visited hyperlinks in IE 11 f ...

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...