Wie öffne ich ein Popup, wenn <a> tag onClick?


9

In Magento 2 möchte ich ein Popup (mit HTML-Code) anzeigen, wenn ein Benutzer auf einen Link klickt.


Ich werde Ihnen in wenigen Minuten eine Antwort geben.
Suresh Chikani

Kannst du es mit meinem Code versuchen, ob du Erfolg hast oder nicht, hast du ein Problem?
Suresh Chikani

Antworten:


37

Sie können Popup öffnen , wenn <a>Tag ONCLICK unter Code

<div>
    <a href="#" id="click-me">Click Me</a>
</div>

<div id="popup-modal" style="display:none;">
    <h1> Hi I'm here.... </h1>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup modal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $("#click-me").on('click',function(){ 
                $("#popup-modal").modal("openModal");
            });

        }
    );
</script>

Lassen Sie mich wissen, wenn Sie ein Problem haben.


Es funktioniert, danke. Der Text "Hallo, ich bin hier" wird jedoch auf dem Bildschirm angezeigt, während die Seite geladen wird, und verschwindet dann. Gibt es eine Lösung dafür?
Luis Garcia

Lassen Sie mich von meiner Seite überprüfen und auf Sie aktualisieren.
Suresh Chikani

Probieren Sie meinen Update-Code aus. Update für mich funktioniert oder nicht?
Suresh Chikani

Hae @SHPatel, ich habe das Formular in einem Modal mit dem obigen Code erstellt, aber die Schaltfläche zum Senden funktioniert beim Senden des Formulars nicht. Könnten Sie mir bitte helfen? Könntest du mich zur Chatbox hinzufügen, damit ich meinen Code posten kann?
Venu Joginpally

@VenuJoginpally, ich füge auch Formular in der Gruppe hinzu können Sie mir sagen, wie ich das Formular einreichen soll
Jaisa

10

Probieren Sie Magento2 Standard aus:

Kopieren Sie den folgenden Code in die HTML- Datei.

<div id="modal-form">
    <h1>Hey</h1>
</div>
<a class="action open-modal-form"
   href="#"
   title="Modal">
    <span>Click Me!</span>
</a>
<script type="text/x-magento-init">
    {
        ".open-modal-form": {
            "Vendor_Module/js/modal-form": {}
        }
    }
</script>

Erstellen Sie Vendor / Module / view / frontend / web / js / modal-form.js

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($) {
        "use strict";
        //creating jquery widget
        $.widget('Vendor.modalForm', {
            options: {
                modalForm: '#modal-form',
                modalButton: '.open-modal-form'
            },
            _create: function() {
                this.options.modalOption = this._getModalOptions();
                this._bind();
            },
            _getModalOptions: function() {
                /**
                 * Modal options
                 */
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: 'Sample Title',
                    buttons: [{
                        text: $.mage.__('Continue'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };

                return options;
            },
            _bind: function(){
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton,  function(){
                    //Initialize modal
                    $(modalForm).modal(modalOption);
                    //open modal
                    $(modalForm).trigger('openModal');
                });
            }
        });

        return $.Vendor.modalForm;
    }
);

Ich kann es nicht zum Laufen bringen. Ich verwende den Link, um ein Popup für die Größenübersicht auf Produktseiten zu öffnen. Auf den Produktseiten, auf denen dieser Link aktiviert ist, funktioniert das Popup jedoch nicht (nichts passiert, wenn auf den Link geklickt wird), und die Produktbilder werden nicht geladen.
Luis Garcia

Können Sie Ihren Code zeigen?
Sohel Rana

Ich habe genau den Code verwendet, den Sie angegeben haben, aber 2 Änderungen, die "Hersteller" und "Modul" mit meinen Lieferanten- und
Luis Garcia

Es ist Arbeitscode. Stellen Sie sicher, dass Sie den Entwicklungsmodus ausführen oder statische Konflikte bereitstellen, indem Sie den Befehl 'php bin / magento setup: static-content: deploy' ausführen
Sohel Rana

Ich denke, der Teil, den Sie in der Antwort verpasst haben, war die Deklaration der Datei requirejs-config.js. Auch wenn dies impliziert ist, hat das Hinzufügen dieser Datei Ihre Lösung perfekt gemacht!.
Circelsix
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.