Home/ Questions/Q 7849725
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T18:37:05+00:00

I’ve come realize that jquery dialogs won’t apply any CSS styles defined by the

  • 0

I’ve come realize that jquery dialogs won’t apply any CSS styles defined by the dialogClass if you’re using an external CSS file. …or at least not the way I’m doing it. I went ahead to create a fiddle, but noticed it worked on there and then tried moving my CSS into the head section of the page and it worked. Is there a way to get jquery dialogs to apply styles from an external CSS file or am I stuck with CSS in the html page?
Please provide solution to the way the code works below (with html for dialog on-fly and dialog options provided in the initializer).

function test()
{
    var html = "<strong>Hello World!</strong>";
    var $dialog = $('<div></div>').html(html)
        .dialog({ dialogClass: 'myStyle', modal: true, autoOpen: false });

    $dialog.dialog('open');
}

.myStyle
{
    color: #FF0000;
    font-size: 28pt;
    font-family: 'Comic Sans MS';
}


<head>
<script type="text/javascript" src="myexternal.js"></script>
    <link type="text/css" href="core.css" rel="Stylesheet" />
    <link type="text/css" href="lib/jquery-ui-1.8.19.custom/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="lib/jquery-ui-1.8.19.custom/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="lib/jquery-ui-1.8.19.custom/js/jquery-ui-1.8.19.custom.min.js"></script>
</head>
<body>
    <form id="form2" >
        <div>
            <input id="Button2" type="button" value="Show Dialog" onclick="test();" />
        </div>
    </form>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Lol the problem is your layout in head, put the jQueryUI css link before your own core link. This way jQueryUI.css is applied first, then your css is applied aftward thus making belated changes.

    Also, on the same note, if your core js uses jquery, its better to have it follow the jquery link in ur header. Always add “Core Libraries” (aka jQuery & jQueryUI) first before adding your own “Additives”

    • 0