Wie man Elemente außerhalb von Jquery-Dialogen schweben lässt

Question

Ich möchte einen Dialog haben, der ungefähr so aussieht:

Ich dachte, dieser Ansatz würde funktionieren, aber ich lag wohl falsch:

JavaScript

// Erstellt den Dialog
$('.ImageDialogDiv').dialog({
    position: [98, 223],
    resizable: false,
    //modal: true,   /* NACH DEM DEBUGGEN KOMMENTIEREN */
    closeOnEscape: false,
    class: 'OverwriteDialogOverflow',
    title: $('#hiddenDialogElements').html(),
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

CSS

  /*
  * Überschreibt versteckten Überlauf
  */
 .OverwriteDialogOverflow
 {
     overflow: visible;
 } 

HTML

    Schließen

Wenn ich versuche, die Pfeile oder Schaltfläche zum Schließen aus dem Dialog zu verschieben, werden sie abgeschnitten und nicht sichtbar. Ich dachte, .OverwriteDialogOverflow würde das regeln.

Vorschläge?

Answer 1

Ich werde dies mit mehr Details bearbeiten, wenn/sobald Sie den Beitrag aktualisieren, aber was ich tun würde, ist den Dialog und die Schaltflächen in einem Container-Div mit relativer Positionierung zu platzieren und absolute Positionierung zu verwenden, um die Schaltflächen zu platzieren. Etwas wie unten...

HTML:

        Schließen

CSS:

.OverwriteDialogOverflow { overflow: visible; }

#dialogContainer { position: relative; }

#hiddencloseButton {
    position: absolute;
    top: -15px;
    right: -15px;
}

#hiddenArrowButtons {
    position: absolute;
    bottom: -30px;
}

.ui-dialog { overflow: visible; }

Bearbeiten: .ui-dialog CSS hinzugefügt gemäß Kommentar

Answer 2

Um den Schließen-Button nach außen zu verschieben, habe ich diesen Code geschrieben

                $(".ui-dialog-titlebar-close").css('background-image', 'url(../../images/closePopUpX.png)');
                $(".ui-dialog-titlebar-close").css('width','25');
                $(".ui-dialog-titlebar-close").css('height','25');
                $(".ui-dialog-titlebar-close").css('top','-7px');
                $(".ui-dialog-titlebar-close").css('right','-15px');
                $(".ui-dialog-titlebar-close").css('background-repeat','no-repeat');
                $(".ui-dialog-titlebar-close").css('background-position','center center');
                $(".ui-dialog").css('overflow','visible');
                $('.ui-icon').css('display','none');

im Dialog-Erstellungsabschnitt.

Answer 3

Sie können benutzerdefiniertes Inline-CSS und Klassen beim öffnen: Funktionsaufruf hinzufügen...

    $('#splash_screen_dialog').dialog({
        öffnen: function(event, ui) {
            $(this).css({
                'max-height': 500,
                'overflow-y': 'auto'
            }).addClass('dialog-overflow');
        }
    });