0
私のニーズに完全に合ったポップアップを使用しています！私がしたいのは、同じポップアップの別のインスタンスを追加することですが、そのポータップは動作しません。基本的には、登録用とログイン用の2つの異なるポップアップが表示されます。 somedialog2はここで働いていない正常に動作somedialogという名前の最初のインスタンスが、インスタンスは、私のコード複数のポップアップインスタンスを使用
<a data-dialog="somedialog" class="trigger icon icon-register">Register</a>
<a data-dialog="somedialog2" class="trigger icon icon-login">Login</a>
<div id="somedialog" class="dialog dialog--close">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<div class="morph-shape">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="none">
<rect x="3" y="3" fill="none" width="556" height="276"></rect>
</svg>
</div>
<div class="dialog-inner">
<h2><strong>Wait!</strong>, Are you a teacher or a student?</h2>
<div>
<button style="display: none" class="action" data-dialog-close="a">Close</button>
<button class="action" onclick="window.location.href='<?=base_url()?>Home/student_register'">I'm A Student</button>
<button class="action" onclick="window.location.href='<?=base_url()?>Home/teacher_register'">I'm A Teacher</button>
</div>
</div>
</div>
</div>
<div id="somedialog2" class="dialog dialog--close">
<h1>here</h1>
<div class="dialog__overlay"></div>
<div class="dialog__content">
<div class="morph-shape">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="none">
<rect x="3" y="3" fill="none" width="556" height="276"></rect>
</svg>
</div>
<div class="dialog-inner">
<h2><strong>Wait!</strong>, Are you a teacher or a student?</h2>
<div>
<button style="display: none" class="action" data-dialog-close="a">Close</button>
<button class="action" onclick="window.location.href='<?=base_url()?>Student'">I'm A Student</button>
<button class="action" onclick="window.location.href='<?=base_url()?>Teacher'">I'm A Teacher</button>
</div>
</div>
</div>
</div>
JS
(function(window) {
'use strict';
var support = { animations : Modernizr.cssanimations },
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') ],
onEndAnimation = function(el, callback) {
var onEndCallbackFn = function(ev) {
if(support.animations) {
if(ev.target != this) return;
this.removeEventListener(animEndEventName, onEndCallbackFn);
}
if(callback && typeof callback === 'function') { callback.call(); }
};
if(support.animations) {
el.addEventListener(animEndEventName, onEndCallbackFn);
}
else {
onEndCallbackFn();
}
};
function extend(a, b) {
for(var key in b) {
if(b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
function DialogFx(el, options) {
this.el = el;
this.options = extend({}, this.options);
extend(this.options, options);
this.ctrlClose = this.el.querySelector('[data-dialog-close]');
this.isOpen = false;
this._initEvents();
}
DialogFx.prototype.options = {
// callbacks
onOpenDialog : function() { return false; },
onCloseDialog : function() { return false; }
}
DialogFx.prototype._initEvents = function() {
var self = this;
// close action
this.ctrlClose.addEventListener('click', this.toggle.bind(this));
// esc key closes dialog
document.addEventListener('keydown', function(ev) {
var keyCode = ev.keyCode || ev.which;
if(keyCode === 27 && self.isOpen) {
self.toggle();
}
});
this.el.querySelector('.dialog__overlay').addEventListener('click', this.toggle.bind(this));
}
DialogFx.prototype.toggle = function() {
var self = this;
if(this.isOpen) {
classie.remove(this.el, 'dialog--open');
classie.add(self.el, 'dialog--close');
onEndAnimation(this.el.querySelector('.dialog__content'), function() {
classie.remove(self.el, 'dialog--close');
});
// callback on close
this.options.onCloseDialog(this);
}
else {
classie.add(this.el, 'dialog--open');
// callback on open
this.options.onOpenDialog(this);
}
this.isOpen = !this.isOpen;
};
// add to global namespace
window.DialogFx = DialogFx;
})(window);
(function() {
var dlgtrigger = document.querySelector('[data-dialog]');
console.log(dlgtrigger);
var dlgtrigger = document.querySelector('[data-dialog]'),
somedialog = document.getElementById(dlgtrigger.getAttribute('data-dialog')),
dlg = new DialogFx(somedialog);
dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));
})();
(function() {
var dlgtrigger = document.querySelector('[data-dialog]');
console.log(dlgtrigger);
var dlgtrigger = '<a class="trigger icon icon-register" data-dialog="somedialog">',
somedialog = "somedialog2",
dlg = new DialogFx(somedialog);
dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));
})();
'DialogFx'関数は何をしますか？ –
@JoseRojas私はコードを更新しました –