leanModal.js - Close-Modal auf X Klicken

Brauchen ein wenig Hilfe mit dieser Abfrage:

https://github.com/FinelySliced/leanModal.js/issues/4

Keiner Weise, Euch helfen können?

-R

  • Bitte posten Sie Ihre Frage hier, anstatt einen link zu Ihrer Frage auf eine andere Website.
  • Entschuldigung. Macht vollkommen Sinn.
InformationsquelleAutor John the Painter | 2011-12-09
  1. 3

    Müssen Sie ändern die leanModal.js Quelle, und fügen Sie ein <img> mit einigen styling und click() handler aufrufen close_modal().

    Code:

    $("<img />").css({
  //styling for the img
  'position': 'fixed', 'top':  o.top + 'px', 'left': '50%'
}).click(function() {
  //onclick behaviour - just close it
  close_modal(modal_id); 
  //icon URL   vvvvvvvvvvvvvvvvvvvvv
}).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));

    Finden Sie unter arbeiten code HIER.

    Styling und Symbol-Platzierung ist sehr primitiv, aber Sie sollten in der Lage sein, um es zu ändern, wie Sie möchten. Es ist nur ein Demo :).

    • Was für ein Kerl - das ist perfekt. Ich veränderte den code leicht zu verwenden ein div-element mit X als Inhalt, sondern als ein Bild. Danke, Mann - geniale Hilfe.
    • Außerdem wissen Sie mit diesem overlay, wegen der Länge, auch auf kleineren Bildschirmen eine viel beschnitten wird, aber wenn Sie Blättern, er blättert, hintergrund, Inhalt, anstatt den overlay-content. Möglicherweise zu tun mit der festen position, aber keine Ideen?
    • Vielleicht war dies nicht eine Funktion, wenn die Frage gestellt wurde, aber kann man jetzt sagen, leanModal welche Klasse löst das schließen des modal-Fensters. Von Ihrer website: "Im Geist der Sachen einfach halten, gibt es nur zwei, drei Optionen eingebunden: vertikale position des modalen Elements in Bezug auf das Dokument Körper, die overlay-Deckkraft (Voreinstellung 0.5), und die Schaltfläche "schließen" - option (standardmäßig null). Sie können diese Standardwerte überschreiben, indem Sie Ihre gewünschten Werte in die Funktion, etwa so: $("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });
    InformationsquelleAutor kubetz
  2. 1

    Dies ist, was ich für das div-element:

    $("<div >").css({
                    'position': 'absolute',
                    //'top': o.top + 'px',
                    'top': '-20px',
                    'right': '20px'
                }).click(function() {
                    //onclick behaviour - just close it
                    close_modal(modal_id);
                }).attr('class', 'cross-close').appendTo($(modal_id));

                $(modal_id).fadeTo(200, 1);

                e.preventDefault();

            });

        });

    Hatte und das hat mein CSS...

    .cross-close:before {
content: "x";
}
    InformationsquelleAutor John the Painter
  3. 1

    Hatte ich eigentlich das gleiche Problem und gelöst durch die Simulation der Klick auf das overlay. Zum Beispiel, jeden link oder ein Bild verwendet werden könnte, und fügen Sie einfach ein onclick-Ereignis:

    <a href="javascript:void(0);" onclick="$('#lean_overlay').click();">Close</a>

    oder

    <img src="" onclick="$('#lean_overlay').click();" />

    Scheint gut zu funktionieren 😀

    InformationsquelleAutor Patrick
Schreibe einen Kommentar