How to remove jQuery-ui dialog title bar?

前端 未结 4 1240
闹比i
闹比i 2021-02-02 14:54

I am trying to hide jQuery-ui dialog\'s title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post t

4条回答
  •  余生分开走
    2021-02-02 15:03

    This is How it can be done.

    Go to themes folder--> base--> open jquery.ui.dialog.css

    Find

    Followings

    if you don't want to display titleBar then simply set display:none as i did in the following.

    .ui dialog.ui-dialog .ui-dialog-titlebar 
    {
        padding: .4em 1em;
        position: relative;
            display:none;
    }
    

    Samilarly for title as well.

    .ui-dialog .ui-dialog-title {
        float: left;
        margin: .1em 0;
        white-space: nowrap;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        display:none; 
    }
    

    Now comes close button you can also set it none or you can set its

    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 21px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
    
       display:none;
    
    }
    

    I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery

    here is syntax for this

    $(".specificclass").css({display:normal})
    

提交回复
热议问题