1

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

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>
  • Thank you very much , you did an excellent job. Works as required – Verdu May 8 '17 at 9:05
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.