✔ jQuery modal Dialog

[tequila slammer]

Hallo Forum,

ich habe wieder eine Frage zu jQuery. Mein Ziel einen modales Dialog zu erzeugen.

Im FF kommt das Fenster ohne Overlay und den Buttons. Während beim IE8 hingegen der Dialog unmittelbar nach dem Öffnen nach unten zu Wandern beginnt und die Seite wird immer länger. Warum verhalten sich beide Browser mit meinem Dialog so, während die jquery Demos ohne Probleme funktionieren?

function showConfigDialog() {

                $("#Config").dialog({
                    height: 300,
                    width: 350,
                    modal: true,
                    autoOpen: false,
                    overlay: {
                        backgroundColor: '#000',
                        opacity: 0.5
                    },
                    buttons: {
                        "OK": function() {
                            $(this).dialog('close');
                        },
                        "Cancel": function() {
                            $(this).dialog('close');
                        }
                    }
                });

                $("#Config").dialog('open');
            }

 

[Sven Mintel]

Moin,

ist das irgendwo online? Nur anhand dieser Funktion lässt sich das nicht beantworten.

 

[tequila slammer]

Hallo Sven,

ich habe nun ein Beispiel online.

 

[Sven Mintel]

Moin,

deinem Beispiel fehlt die jquery-ui.css

Wenn du dies ebenfalls einbindest, wandert nichts und es sieht alles aus wie in der Demo.

 

[tequila slammer]

Mit dem StyleSheet überschreibe ich dann aber meine eigenen Designanpassungen - oder kann ich beide Kombinieren?

 

[Maik]

Hi.

Mit dem StyleSheet überschreibe ich dann aber meine eigenen Designanpassungen - oder kann ich beide Kombinieren?

Wenn du beim Einbinden der beiden Stylesheets deines an letzter Stelle aufrufst, werden in der Kaskade die CSS-Regeln von jquery-ui.css durch dein Stylesheet überschrieben.

<link href="layout/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="layout/css/template.css" rel="stylesheet" type="text/css" />

Damit dies in der Praxis auch reibungslos funktioniert, sind natürlich gleichlautende Selektoren in beiden CSS-Dateien zwingende Voraussetzung.

mfg Maik

 

[tequila slammer]

ah ok. Mit der eingebundenen css Datei sieht das Ganze nun schon besser aus, allerdings wird die Dialog-Höhe erst nach einem Drag richtig dargestellt und die Buttons sind nicht richtig platziert.

 

[Sven Mintel]

Niemand kann hellsehen, wie du es gerne hättest.

Die offensichtlichen Fehler in der Darstellung werden durch dein CSS verursacht, ohne dies sieht es normal aus...die Fehler müsstest du also in deinem CSS fixen(wie, kannst nur du wissen, da nur du weisst, wie es aussehen soll)

 

[tequila slammer]

Alles klar. Dann werde ich mal die css Bücher aus dem Regal holen.