JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div id="t">test</div>

JavaScript

/*
var aa = function() {
  return 100
}

var bb = function() {
  return 200
}

var cc = function() {
  return 300
}

var dd = function() {
  return 400
}

var test = function(a, b, c, d) {
  return a + " " + b + " " + c + " " + d;
}

document.querySelector('#t').innerHTML = test(aa(), bb(), cc(), dd());

function aa() {
  return "this is a test for";
}

function bb() {
  return 200
}

function cc() {
  return 300
}

function dd() {
  return 400
}
*/


function openBox(start, complet, close, content, config) {

  //    $box.open({
  fancybox = {
    //   content: _modal_content,
    //   showCloseButton: true,
    //   centerOnScroll: true,
    //   hideOnOverlayClick: true,
    //   width: 700,
    //   height: 660,
    //   autoScale: true,
    onStart: function() {
      return start
    },
    onComplete: function() {
      return complet
    },
    onClosed: function() {
      return close;
    }
  };
  //  });
  fancybox.onStart;
};


document.querySelector('#t').innerHTML = openBox(start(), complet(), close(), content(), config());

function start() {
  return "starting the Modal >>>";
}

function complet() {
  return "completing the Modal >>>";
}

function close() {
  return "closing the Modal >>>";
}