Grow your CSS skills. Land your dream job.

how to replace jquery dialog Title with custom DIV?

  • # November 10, 2013 at 10:10 am

    By another post I came across to know that we can replace the jquery dialog title bar with some custom DIV (span).

    $('#dlg').dialog({/*options*/}).parent().find("div.ui-dialog- titlebar').addClass('myClassname');
    $('.myClassname span').css({position: "absolute", left: "300px", top: "-10px", background: "red"});
    $('.myClassname).css("height", "50px");

    We are trying to do the same for below JS Fiddle code, but I when I set above properties, then dialog not works.

    Currently we show/hide the red color DIV (which is not looks good to me).

    How can we directly replace the title with custom DIV as well as How can I know the top left corner position of jquery dialog?

    here is Fiddle link,

    link………

    # November 14, 2013 at 6:02 pm

    Probably because you have a number of issues.

    Below, notice you have a single quote and a double quote? There is also an extra space in there.

    .find("div.ui-dialog- titlebar')
    

    Here is missing an apostrophe.

    $('.myClassname).css("height", "50px");
    

    Even after you fix it, it still wouldn’t work. The selector for the titlebar is wrong.

    .parent().find("div.ui-dialog- titlebar')
    

    The Dialog box and the Title Bar are siblings. The Title Bar isn’t a parent of the dialog box.

    Here is a new fiddle for you. I removed the typos and fixed the selector. I also moved all the css you made with jquery into the css file.

    Fiddle

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".