Last active
December 19, 2020 23:38
-
-
Save MNBuyskih/6214470 to your computer and use it in GitHub Desktop.
Bootstrap modal helper class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <script src="https://code.jquery.com/jquery-2.1.1.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="modal.js"></script> | |
| </head> | |
| <body> | |
| <a href="#">Open modal</a> | |
| <script> | |
| $('a').click(function () { | |
| var m = new Modal({ | |
| id: 'myModal', | |
| header: 'My Modal', | |
| footer: true, | |
| footerCloseButton: 'Close' | |
| }); | |
| m.getBody().html('Test modal body content'); | |
| m.show(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Bootstrap modal helper class. | |
| * Just create new instance and work with window like object. | |
| * | |
| * <pre> | |
| * $('#link').click(function (e) { | |
| * e.preventDefault(); | |
| * | |
| * modalWindow = new Modal({ | |
| * id: "MyWindow", | |
| * header: "Login Please", | |
| * footerCloseButton: "Close", | |
| * }); | |
| * | |
| * modalWindow.getBody().load('/user/login', function () { | |
| * modalWindow.show(); | |
| * modalWindow.getBody().find('form').myFormCalBack(); | |
| * }); | |
| * }); | |
| * </pre> | |
| * | |
| * @param {Object} [options] Options list. | |
| * @param {String|Boolean} [options.header = false] Header text. Default false - do not show header block. | |
| * @param {Boolean} [options.closeButton = true] Show or not header close button. It makes sense only if the options.header is logical true. | |
| * @param {Boolean} [options.footer = false] Show or not footer block. Default false; | |
| * @param {String|Boolean} [options.footerCloseButton = false] Footer close button text. Default false - do not show footer close button. | |
| * @param {String} [options.id = "myModal"] Modal container id attribute; | |
| * | |
| * @constructor | |
| */ | |
| var Modal = function (options) { | |
| var $this = this; | |
| options = options ? options : {}; | |
| $this.options = {}; | |
| $this.options.header = options.header !== undefined ? options.header : false; | |
| $this.options.footer = options.footer !== undefined ? options.footer : false; | |
| $this.options.closeButton = options.closeButton !== undefined ? options.closeButton : true; | |
| $this.options.footerCloseButton = options.footerCloseButton !== undefined ? options.footerCloseButton : false; | |
| $this.options.id = options.id !== undefined ? options.id : "myModal"; | |
| /** | |
| * Append modal window html to body | |
| */ | |
| $this.createModal = function () { | |
| $('body').append('<div id="' + $this.options.id + '" class="modal fade"></div>'); | |
| $($this.selector).append('<div class="modal-dialog"><div class="modal-content"></div></div>'); | |
| var win = $('.modal-content', $this.selector); | |
| if ($this.options.header) { | |
| win.append('<div class="modal-header"><h4 class="modal-title"></h4></div>'); | |
| if ($this.options.closeButton) { | |
| win.find('.modal-header').prepend('<button type="button" class="close" data-dismiss="modal">×</button>'); | |
| } | |
| } | |
| win.append('<div class="modal-body"></div>'); | |
| if ($this.options.footer) { | |
| win.append('<div class="modal-footer"></div>'); | |
| if ($this.options.footerCloseButton) { | |
| win.find('.modal-footer').append('<a data-dismiss="modal" href="#" class="btn btn-default">' + $this.options.footerCloseButton + '</a>'); | |
| } | |
| } | |
| }; | |
| /** | |
| * Set header text. It makes sense only if the options.header is logical true. | |
| * @param {String} html New header text. | |
| */ | |
| $this.setHeader = function (html) { | |
| $this.window.find('.modal-title').html(html); | |
| }; | |
| /** | |
| * Set body HTML. | |
| * @param {String} html New body HTML | |
| */ | |
| $this.setBody = function (html) { | |
| $this.window.find('.modal-body').html(html); | |
| }; | |
| /** | |
| * Set footer HTML. | |
| * @param {String} html New footer HTML | |
| */ | |
| $this.setFooter = function (html) { | |
| $this.window.find('.modal-footer').html(html); | |
| }; | |
| /** | |
| * Return window body element. | |
| * @returns {jQuery} The body element | |
| */ | |
| $this.getBody = function () { | |
| return $this.window.find('.modal-body'); | |
| }; | |
| /** | |
| * Show modal window | |
| */ | |
| $this.show = function () { | |
| $this.window.modal('show'); | |
| }; | |
| /** | |
| * Hide modal window | |
| */ | |
| $this.hide = function () { | |
| $this.window.modal('hide'); | |
| }; | |
| /** | |
| * Toggle modal window | |
| */ | |
| $this.toggle = function () { | |
| $this.window.modal('toggle'); | |
| }; | |
| $this.selector = "#" + $this.options.id; | |
| if (!$($this.selector).length) { | |
| $this.createModal(); | |
| } | |
| $this.window = $($this.selector); | |
| $this.setHeader($this.options.header); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Woow.. cool man.. this is what I am looking for..
Let me take it for my project as well.. :D