•  08-10-2020
  •  | 
  •  

题

I have a popup modal which onclicks opens , I want this modal to be closed when I submit the form and get the ajax success request. I tried with 

success: function(data)
   {
       //console.log('ticket added');
       this.closeModal();
   }

But it is not working , can anyone sort this out. Thanks in Advance

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

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

    }
   );
   </script>

<div id="events_popup" style="display: none;" class="events_popup">
<script type="text/javascript">
require(
    [
        'jquery'

    ],
    function($,modal)
    {
  $("#<?php echo $_product->getId()?>").submit(function(e) {



$.ajax({

       type: "POST",
       url:  $(this).attr('action'),
       data: $("#<?php echo $_product->getId()?>").serialize(), 
       showLoader: true,
       success: function(data)
       {
           //console.log('ticket added');
           document.close();
       }
     });

    e.preventDefault(); 
  });

    }


    ); 

</script>
</div>
有帮助吗？

解决方案

Try this

success: function(data)
   {
    //events_popup is you popup id
       $('#events_popup').modal('closeModal');
   }

This is your final answer

<div id="events_popup" style="display: none;" class="events_popup">
<script type="text/javascript">
require(
    [
        'jquery'

    ],
    function($,modal)
    {
        $("#<?php echo $_product->getId()?>").submit(function(e) {
            $.ajax({
                   type: "POST",
                   url:  $(this).attr('action'),
                   data: $("#<?php echo $_product->getId()?>").serialize(), 
                   showLoader: true,
                   success: function(data)
                   {
                       //events_popup is you popup id
                       $('#events_popup').modal('closeModal');
                   }
                 });
            e.preventDefault(); 
        });

    }
); 
</script>

其他提示

Create static block and insert the following code:

<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>
许可以下： CC-BY-SA 和 归因
scroll top