Wie erstelle ich ein Formular Popup-Modal in Magento2

20

Ich bin neu bei magento2. Ich versuche, ein Popup-Modal für mein neues Formular zu erstellen. Ich habe ein Popup erstellt, das funktioniert, aber kein Modal erstellen kann.

Es folgt der Code für das Popup, das beim Laden der Seite geladen wird:

require([
        'jquery',
        'Magento_Ui/js/modal/alert'
    ],
    function($, alert) {
       alert({
            title: "Some title",
            content: "we can show popuop based on cookies later",
            autoOpen: true,
            clickableOverlay: false,
            focus: "",
            actions: {
                always: function(){
                    console.log("modal closed");
                }
            }
        });
    }
);

Bitte helfen Sie mir, ein Modal zu erstellen. Jede Hilfe wird sehr geschätzt.

magento2 widgets modal

— user2978128
quelle

Ich stimme dafür, diese Frage als "Off-Topic" zu schließen, da es sich um JavaScript handelt und auf die allgemeine stackoverflow.com-Site gehört

— Sander Mangel

42

Versuchen Sie den folgenden Code:

<div id="popup-modal">
    <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'));

            $('#popup-modal').modal('openModal');
        }
    );
</script>

— Sohel Rana
quelle

Wie öffne ich div-Inhalte auf <a> tag onClick?

— Suresh Chikani

@SHPatel Suchen Sie nach der gleichen Lösung, haben Sie sie gefunden?

— Luis Garcia

@ Luis Garcia Ja, ich habe Lösung

— Suresh Chikani

Ja, Sie können Ihre Frage stellen.

— Suresh Chikani

@ SHPatel Wie kann ich die Formulardaten erhalten? in der click: function () { this.closeModal();}Wenn ich textboxin der habe <div id="popup-modal">?

— Bojjaiah

10

Sie müssen das Widget Magento_Ui / js / modal / modal verwenden. Weitere Details finden Sie im offiziellen Dokumentationsbeispiel :

require([
    'jquery',
    'jquery/ui',
    'Magento_Ui/js/modal/modal'
], function($){
     $('<div />').html('Modal Window Content')
        .modal({
            title: 'My Title',
            autoOpen: true,
            closed: function () {
                // on close
            },
            buttons: [{
                text: 'Confirm',
                attr: {
                    'data-action': 'confirm'
                },
                'class': 'action-primary',
                click: clickCallback
            }]
         });
});

— KAndy
quelle

Wie kann ich erstellen bearbeiten Form UI-Komponente modal. Keine Weiterleitung durch Controller

— mrtuvn

Wie kann ich die Formulardaten erhalten? in der click: function () { this.closeModal();}Wenn ich textboxin der habe <div id="popup-modal">?

— Bojjaiah

soll ich eine andere Funktion innerhalb der Klickfunktion anstelle von this.closeModal ()

— aufrufen

1

Modales Popup-Fenster im Kopfbereich

 <a href="#" id="click-header">
    View Video
</a>
<div id="header-mpdal" style="display:none;">
    <div class="videoWrapper">
        <iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="315" src="https://www.youtube.com/embed/P45AMKIW0ok" width="560">
        </iframe>
    </div>
</div>

Skript ist hier: -

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

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

        }
    );
</script>

Da dies auf einer reaktionsfähigen Site ist, habe ich einen Video-Wrapper hinzugefügt, um sicherzustellen, dass er reagiert.

Hier ist CSS, um dies zu erreichen:

.videoWrapper { position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;
iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
}

— Divyesh
quelle

0

Erstellen Sie einen statischen Block und fügen Sie Folgendes ein:

<html>
<head>
<style>
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
button {
    background-color: #0ea3d6;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.close:hover { background: #00d9ff; }

</style>
</head>
<body>
    <div class="row">
        <a href="#urlid"><button>Button</button></a>
        <div id="urlid" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
                <h2>Hand Tools</h2>
                <p>This is a sample modal box that can be created using the powers of CSS3.</p>
                <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
            </div>
        </div>
    </div>
</body>
</html>

— Teja Bhagavan Kollepara
quelle

0

<script>
require(['Magento_Ui/js/modal/confirm'],
    function(confirm) {
        confirm({
            title: 'Confirm Dialog',
            content: "We need your confirmation there",
            actions: {
                confirm: function() { console.log('confirmed') },
                cancel: function() { console.log('canceled') }
            }
        });
);
</script>

— Victor Nazarov
quelle