CSS - MODAAL

    // MODAAL
    Download and link files ( js/modaal.min.js - css/modaal.css - jquery.js)
    <link rel="stylesheet" href="css/modaal.css">
    <script src="js/jquery-3.4.1.min.js"></script>  //Librerias primero antes de js
    <a href="ajax.html" class="modaal-ajax">Show Ajax</a>
    

    // USE
    //.inline
    <button data-modaal-content-source="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show3</button>

    //Gallery
    <a href="img/1.jpg" data-group="gallery" class="gallery"><img src="img/Mini/1.jpg" alt=""></a>
    <a href="img/2.jpg" data-group="gallery" class="gallery"><img src="img/Mini/2.jpg" alt=""></a>

    //iFrame
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oSmUI3m2kLk" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 

    //Video
    <a href="https://www.youtube.com/embed/c8lEWPKC0kk" class="video">Show Youtube</a>

    //Ajax
    <a href="ajax.html" class="modaal-ajax">Show Ajax</a>

    // INITIALIZE JAVASCRIPT

    //INLINE BUTTON
    //   For the first "a" only  $('.inline').modaal(); 
    $('.inline').modaal({ 
        content_source: '#inline'
    });
    
    //GALLERY
    $('.gallery').modaal({
    type: 'image'
    });
    
    
    //CALCULAR ANCHO VENTANA
    var ancho = $(window).width();
    console.log(ancho);
    
    if(ancho > 500){
        window.alert('La ventana mide mas de 500');
    }
    
    $(window).on('resize', function(){ 
        ancho = $(window).width();
        console.log(ancho);
    });
    
    
    // VIDEO
    $('.video').modaal({
    type: 'video', 
    hide_close: true,
    overlay_close: false,
    background: '#f345'
    });
    
    //AJAX
    $('.modaal-ajax').modaal({
    type: 'ajax'
    });