diff --git a/README.md b/README.md index eaa3a27..7441cd1 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,11 @@ Demos Author: Michael Scharnagl @justmarkup +Transforming a link to a login page to a button opening the login form in an overlay +------------ +* Demo: http://justmarkup.github.io/demos/link-to-button +* Article: https://justmarkup.com/log/?p=3432&preview=true + Enhancing a login form – from basic to validation to reveal password ------------ * Demo: https://enhance-login-form.glitch.me/login diff --git a/link-to-button/script.js b/link-to-button/script.js index 013b2d4..f22c60f 100644 --- a/link-to-button/script.js +++ b/link-to-button/script.js @@ -6,14 +6,6 @@ var dialogContent = document.querySelector('[data-dialog-content]'); window.dialog = false; - dialogOpener.outerHTML = ` - - `; - - dialogOpener = document.querySelector('[data-link="' + dialogOpener.href + '"]') - if (!window.dialog) { var dialogElement = document.getElementById('dialog'); var mainEl = document.querySelector('#content'); @@ -31,11 +23,17 @@ }); } + dialogOpener.outerHTML = ` + + `; + + dialogOpener = document.querySelector('[data-link="' + dialogOpener.href + '"]'); + dialogOpener.addEventListener('click', function(ev) { var link = this.dataset.link ? this.dataset.link : false; - console.log('click', link); - if (link) { fetch(link)