I have this button in HTML:
<div id="login">
<img src="/resource/image_header/login.png" alt="Login">
<div class="cd-main-nav js-main-nav">
<button id="welcome-text" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title=""></button>
<ul id="login-signup" class="cd-main-nav__list js-signin-modal-trigger">
<li><a id="logInButton" class="cd-main-nav__item js-signin-modal-trigger cd-main-nav__item--signin" data-type="login" data-signin="login">Đăng nhập</a></li>
</ul>
</div>
</div>
and a pop-up modal for login form:
<div id="login-popup" class="cd-signin-modal js-signin-modal">
<div class="cd-signin-modal__container">
<ul class="cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
<li><a data-signin="login" data-type="login" style="font-weight: bold;">Đăng nhập</a></li>
</ul>
<div class="cd-signin-modal__block js-signin-modal-block" data-type="login">
<!-- log in form -->
<form id="loginForm" class="cd-signin-modal__form">
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signin-email">Tên đăng nhập</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-email" type="text" placeholder="Tên đăng nhập">
<span class="cd-signin-modal__error">Bạn chưa nhập tên đăng nhập!</span>
</p>
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signin-password">Mật khẩu</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-password" type="password" placeholder="Mật khẩu">
<span class="cd-signin-modal__error">Bạn chưa nhập mật khẩu!</span>
</p>
<p class="cd-signin-modal__fieldset">
<input type="checkbox" id="remember-me" checked class="cd-signin-modal__input ">
<label for="remember-me">Ghi nhớ</label>
</p>
<p class="cd-signin-modal__fieldset">
<input id="loginButton" class="cd-signin-modal__input cd-signin-modal__input--full-width" type="submit" value="Đăng nhập">
</p>
</form>
<p class="cd-signin-modal__bottom-message js-signin-modal-trigger">Bạn chưa có tài khoản?<a id="signupButton" href="javascript:void(0)">Đăng ký ngay</a></p>
</div> <!-- cd-signin-modal__block -->
</div>
</div>
This is javascript to open the form when clicking the button id=”logInButton”:
function ModalSignin(element) {
this.element = element;
this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a');
this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
this.hidePassword = this.element.getElementsByClassName('js-hide-password');
this.init();
};
ModalSignin.prototype.init = function () {
var self = this;
//open modal/switch form
for (var i = 0; i < this.triggers.length; i++) {
(function (i) {
self.triggers[i].addEventListener('click', function (event) {
if (event.target.hasAttribute('data-signin')) {
event.preventDefault();
self.showSigninForm(event.target.getAttribute('data-signin'));
}
});
})(i);
}
}
I tried to debug by console.log("Clicked!") when clicking the button but the event did not happen. Is the button blocked somewhere?
2
I just mocked some missing parts, fixed some and made you code work in the following snippet:
function ModalSignin(element) {
this.element = element;
this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a');
this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
this.hidePassword = this.element.getElementsByClassName('js-hide-password');
this.init();
};
ModalSignin.prototype.init = function () {
var self = this;
//open modal/switch form
for (var i = 0; i < this.triggers.length; i++) {
(function (i) {
self.triggers[i].addEventListener('click', function (event) {
if (event.target.hasAttribute('data-signin')) {
event.preventDefault();
// Stopping propagation (because there are triggers inside triggers)
event.stopPropagation();
const modalId = event.target.getAttribute('data-signin') + '-popup';
//self.showSigninForm(event.target.getAttribute('data-signin'));
// added line:
document.getElementById(modalId).classList.toggle('js-signin-modal');
}
});
})(i);
}
}
// added lines:
const modalResult = new ModalSignin(document.body);
console.log('Modal Result Triggers:', modalResult.triggers);.js-signin-modal
{display: none}<div id="login">
<img src="/resource/image_header/login.png" alt="Login">
<div class="cd-main-nav js-main-nav">
<button id="welcome-text" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title=""></button>
<ul id="login-signup" class="cd-main-nav__list js-signin-modal-trigger">
<li><a id="logInButton" class="cd-main-nav__item js-signin-modal-trigger cd-main-nav__item--signin" data-type="login" data-signin="login"><!-- Đăng nhập -->Click Here</a></li>
</ul>
</div>
</div>
<div id="login-popup" class="cd-signin-modal js-signin-modal">
<div class="cd-signin-modal__container">
<ul class="cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
<li><a data-signin="login" data-type="login" style="font-weight: bold;">Đăng nhập</a></li>
</ul>
<div class="cd-signin-modal__block js-signin-modal-block" data-type="login">
<!-- log in form -->
<form id="loginForm" class="cd-signin-modal__form">
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signin-email">Tên đăng nhập</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-email" type="text" placeholder="Tên đăng nhập">
<span class="cd-signin-modal__error">Bạn chưa nhập tên đăng nhập!</span>
</p>
<p class="cd-signin-modal__fieldset">
<label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signin-password">Mật khẩu</label>
<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signin-password" type="password" placeholder="Mật khẩu">
<span class="cd-signin-modal__error">Bạn chưa nhập mật khẩu!</span>
</p>
<p class="cd-signin-modal__fieldset">
<input type="checkbox" id="remember-me" checked class="cd-signin-modal__input ">
<label for="remember-me">Ghi nhớ</label>
</p>
<p class="cd-signin-modal__fieldset">
<input id="loginButton" class="cd-signin-modal__input cd-signin-modal__input--full-width" type="submit" value="Đăng nhập">
</p>
</form>
<p class="cd-signin-modal__bottom-message js-signin-modal-trigger">Bạn chưa có tài khoản?<a id="signupButton" href="javascript:void(0)">Đăng ký ngay</a></p>
</div> <!-- cd-signin-modal__block -->
</div>
</div>Note that as Bravo commented in your question, there’s no construction of the class ModalSignin into a proper instance. So, I made one:
new ModalSignin(document.body);
I also added an event.stopPropagation() to avoid triggering the click listener twice or more each click and mocked the behavior of (ModalSignin instance).showSigninForm() (which is missing) to show/hide the modal.
PS: I also changed the text that should be clicked because it was not in english (and I also don’t know if it hints to click).
CONCLUSION: Your approach is not the very best you can achieve with up-to-date conventions… This is not an appropriate answer, but I put your code to “work”. You’ll have to make some customization to add it back into your project.