http://ryotahirano.github.io/es2015-modal-component
npm i es2015-modal-component
import $ from 'jquery';
import Modal from 'es2015-modal-component';
$('.js-modal-open').each((i, el) => {
return new Modal(el, {}).on('open', function(el, modal) {
// Create Modal Contents
const modalContents = document.createElement('div');
modalContents.classList.add('c-modal');
const modalContentsParagraph = document.createElement('p');
modalContentsParagraph.classList.add('c-text', 'c-text--l', 'c-text-w--b');
modalContentsParagraph.textContent = 'This is Modal Contents.';
modalContents.appendChild(modalContentsParagraph);
// Modal render
modal.render(modalContents);
});
});
// Inner Scroll Modal
$('.js-inner-scroll-modal-open').each((i, el) => {
return new Modal(el, {
modalScrollSelector: '.js-modal-scroll-inner',
isResizeModalHeight: true,
modalHeightRatio: 0.6
}).on('open', function(el, modal) {
// Create Modal Contents
const modalContents = document.createElement('div');
modalContents.classList.add('c-modal', 'js-modal-scroll-inner');
const modalContentsParagraph = document.createElement('p');
modalContentsParagraph.classList.add('c-text', 'c-text--l', 'c-text-w--b');
modalContentsParagraph.textContent = 'This is Inner Scroll Modal Contents. This i...';
// Add More Contents...
// Add More Contents......
// Add More Contents.........
modalContents.appendChild(modalContentsParagraph);
// Modal render
modal.render(modalContents);
});
});
@import '../../node_modules/es2015-modal-component/css/modal';
<a href="" class="js-modal-open">Modal Open</a>
<a href="" class="js-inner-scroll-modal-open">Inner Scroll Modal Open</a>
© RyotaHirano