Magento 2 : Modal Popup using Ajax

Question

How to use model popup using ajax? Can any one help for this. Here below my code. How can i apply in this code model popup? And also post data get in popup. How it possible?

app/code/Vendor/Complany/view/frontend/web/js/example.js

define([
 'jquery',
 'Magento_Ui/js/modal/modal'
], function (,ドルexample,modal) {
 return {
 exampleData:function(ajaxurl){
 $("#example").click(function(e){
 e.preventDefault();
 $.ajax({
 url:ajaxurl,
 type:'POST',
 showLoader: true,
 dataType:'json', 
 success:function(){
 alert('test');
 }
 });
 });
 }
 }
 }
);

app/cpde/Vendor/Company/view/frontend/templates/example/example.phtml

<div id="events_popup" style="display: none;" class="events_popup">
<script>
 require(
 ['jquery','Vendor_Company/js/example'],
 function(,ドルexample){
 var ajaxurl = '<?php echo //My URL using block function; ?>';
 example.exampleData(ajaxurl);
 }
 );
</script>

• Rakesh Jesadiya: have you try with $("#events_popup") instead of $("#example")?
• Payal Patel: @RakeshJesadiya Here $("#example") is button id

Answer 1

define([
 'jquery',
 'Magento_Ui/js/modal/modal'
], function (,ドルexample,modal) {
 var options = {
 type: 'popup',
 responsive: true,
 innerScroll: true,
 buttons: [{
 text: $.mage.__('Continue'),
 class: 'primary action submit btn btn-default',
 click: function () {
 this.closeModal();
 }
 }]
 };
 return {
 exampleData:function(ajaxurl){
 $("#example").click(function(e) {
 e.preventDefault();
 var $form = $('#form-validate');
 var data = $('#form-validate').serialize();
 if(!$form.valid()) return false;
 $.ajax({
 url:ajaxurl,
 type:'POST',
 showLoader: true,
 dataType:'json',
 data: data,
 complete: function(data) {
 $('#email_address').val("");
 $("#events_popup").html('Thanks.').modal(options).modal('openModal');
 },
 error: function (xhr, status, errorThrown) {
 console.log('Error happens. Try again.');
 }
 });
 });
 }
 }
 }
);