发表新帖
发表新帖

jQuery UI Dialog individual CSS styling

前端 未结
关注
8 2647
孤城傲影
孤城傲影 2020-12-05 09:28

I\'m looking to style a modal dialog (using UI Dialog) with unique CSS that is separate from the traditional dialog, so in essence to have two jQuery dialogs that each look

相关标签:
8条回答
  • 情话喂你
    2020-12-05 10:08

    I created custom styles by just overriding jQuery classes in inline style. So on top of the page, you have the jQuery CSS linked and right after that override the classes you need to modify:

    <head>
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>

    <style type="text/css">
        .ui-dialog .ui-dialog-content
        {
            position: relative;
            border: 0;
            padding: .5em 1em;
            background: none;
            overflow: auto;
            zoom: 1;
            background-color: #ffd;
            border: solid 1px #ea7;
        }

        .ui-dialog .ui-dialog-titlebar
        {
            display:none;
        }

        .ui-widget-content
        {
            border:none;
        }
    </style>
</head>
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-05 10:10

    This issue turned up for me when I was trying to find a similar answer. Consider:

        $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

    Where abc is the name of your 'CSS wrapper' - see Stack Overflow question Custom CSS scope and jQuery UI dialog themes where I found the answer from Evgeni Nabokov. For more information on the CSS wrapper in use with a jQuery UI dialog box - see the following (but note they do NOT really solve the issue of the CSS wrapper with the dialog box - you need the above comments to help there, Using Multiple jQuery UI Themes on a Single Page (Filament blog).

    0 讨论(0)
  • 名媛妹妹
    2020-12-05 10:14

    According to the UI dialog documentation, the dialog plugin generates something like this:

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div class="ui-dialog-content ui-widget-content" id="dialog_style1">
      <p>One content</p>
   </div>
</div>

    That means what you can add to any class to exactly to first or second dialog using jQuery's closest() method. For example:

    $('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

    and then CSS it.

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-05 10:17

    You can add the class to the title like this:

    $('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
    0 讨论(0)
  • 我在风中等你
    2020-12-05 10:32

    The current version of dialog has the option "dialogClass" which you can use with your id's. For example,

    $('foo').dialog({dialogClass:'dialog_style1'});

    Then the CSS would be

    .dialog_style1 {color:#aaa;}
    0 讨论(0)
  • 梦毁少年i
    2020-12-05 10:32

    Run the following immediately after the dialog is called in the Ajax:

        $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

    This applies just to the dialog that is opened, so it can be changed for each one used.

    (This quick answer is based on another response on Stack Overflow.)

    0 讨论(0)
 看不清?
提交回复
热议问题