diff --git a/ekko-lightbox.js b/ekko-lightbox.js index fa759b3..25e220f 100644 --- a/ekko-lightbox.js +++ b/ekko-lightbox.js @@ -83,9 +83,9 @@ const Lightbox = (($) => { let h4 = `<h4 class="modal-title">${this._config.title || " "}</h4>`; let btn = `<button type="button" class="close" data-dismiss="modal" aria-label="${this._config.strings.close}"><span aria-hidden="true">×</span></button>`; - let header = `<div class="modal-header${this._config.title || this._config.alwaysShowClose ? '' : ' hide'}">`+(this._isBootstrap3 ? btn+h4 : h4+btn)+`</div>`; + let header = `<div class="modal-header${this._config.title || this._config.alwaysShowClose ? '' : ' hide'}">`+(this._isBootstrap3 ? btn+h4 : h4)+`</div>`; let footer = `<div class="modal-footer${this._config.footer ? '' : ' hide'}">${this._config.footer || " "}</div>`; - let body = '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>' + let body = btn + '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>' let dialog = `<div class="modal-dialog" role="document"><div class="modal-content">${header}${body}${footer}</div></div>` $(this._config.doc.body).append(`<div id="${this._modalId}" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">${dialog}</div>`) diff --git a/ekko-lightbox.less b/ekko-lightbox.less index e6dae94..4171709 100644 --- a/ekko-lightbox.less +++ b/ekko-lightbox.less @@ -76,6 +76,18 @@ .modal-footer { text-align: left; } + + button.close { + position:fixed; + right: 10px; + top: 10px; + background: #fff; + border-radius: 50%; + width: 2rem; + height: 2rem; + opacity: 1; + z-index: 999; + } // http://tobiasahlin.com/spinkit/ &-loader {