Làm thế nào để tạo một hình thức cửa sổ bật lên trong magento2

20

Tôi mới dùng magento2. Tôi đang cố gắng tạo một phương thức popup cho hình thức mới của mình. Tôi đã tạo một cửa sổ bật lên hoạt động tốt nhưng không thể tạo một phương thức.

Sau đây là mã cho cửa sổ bật lên tải khi tải trang--

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");
                }
            }
        });
    }
);

Xin hãy giúp tôi để tạo ra một phương thức. Bất kỳ trợ giúp được thực sự đánh giá cao.

magento2 widgets modal

— người dùng2978128
nguồn

Tôi đang bỏ phiếu để đóng câu hỏi này ngoài chủ đề vì đó là về Javascript và thuộc về trang web stackoverflow.com chung

— Sander Mangel

42

Hãy thử mã dưới đây:

<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
nguồn

Làm cách nào để mở nội dung div trên thẻ <a> trênClick?

— Suresh Chikani

@SHPatel Tìm kiếm giải pháp tương tự, bạn đã tìm thấy nó chưa?

— Luis Garcia

@Luis Garcia Có, tôi có giải pháp

— Suresh Chikani

Có Bạn có thể đặt câu hỏi của bạn.

— Suresh Chikani

@SHPatel làm thế nào tôi có thể lấy dữ liệu biểu mẫu? bên trong click: function () { this.closeModal();}Nếu tôi có textboxbên trong <div id="popup-modal">?

— Bojjaiah

10

Bạn cần sử dụng tiện ích Magento_Ui / js / modal / modal. Xem thêm chi tiết trong ví dụ Tài liệu chính thức :

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
            }]
         });
});

— Knd
nguồn

Làm thế nào tôi có thể tạo biểu mẫu chỉnh sửa ui-thành phần. Không chuyển hướng bởi bộ điều khiển

— mrtuvn

Làm thế nào tôi có thể nhận được dữ liệu mẫu? bên trong click: function () { this.closeModal();}Nếu tôi có textboxbên trong <div id="popup-modal">?

— Bojjaiah

Tôi sẽ gọi một chức năng khác bên trong chức năng nhấp thay vì this.closeModal ()

— Jaisa

1

Cửa sổ bật lên phương thức trong khu vực tiêu đề

 <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>

Kịch bản ở đây: -

<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>

vì đây là trên một trang web phản hồi, tôi đã thêm một Wrapper video để đảm bảo rằng nó phản hồi.

Đây là CSS để thực hiện điều đó:

.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
nguồn

0

Tạo khối tĩnh và chèn như sau:

<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
nguồn

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
nguồn