Browse code
basically works
fiddlerwoaroof authored on 29/06/2015 20:45:26Showing 6 changed files
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,29 @@ |
| 1 |
+Copyright (c) 2011 Edward Langley |
|
| 2 |
+All rights reserved. |
|
| 3 |
+ |
|
| 4 |
+Redistribution and use in source and binary forms, with or without |
|
| 5 |
+modification, are permitted provided that the following conditions |
|
| 6 |
+are met: |
|
| 7 |
+ |
|
| 8 |
+Redistributions of source code must retain the above copyright notice, |
|
| 9 |
+this list of conditions and the following disclaimer. |
|
| 10 |
+ |
|
| 11 |
+Redistributions in binary form must reproduce the above copyright |
|
| 12 |
+notice, this list of conditions and the following disclaimer in the |
|
| 13 |
+documentation and/or other materials provided with the distribution. |
|
| 14 |
+ |
|
| 15 |
+Neither the name of the project's author nor the names of its |
|
| 16 |
+contributors may be used to endorse or promote products derived from |
|
| 17 |
+this software without specific prior written permission. |
|
| 18 |
+ |
|
| 19 |
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
|
| 20 |
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
|
| 21 |
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS |
|
| 22 |
+FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
|
| 23 |
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
|
| 24 |
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED |
|
| 25 |
+TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR |
|
| 26 |
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF |
|
| 27 |
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING |
|
| 28 |
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS |
|
| 29 |
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 2 | 32 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,36 @@ |
| 1 |
+.modal-wrapper {
|
|
| 2 |
+ display: none; |
|
| 3 |
+ position: fixed; |
|
| 4 |
+ top: 0px; |
|
| 5 |
+ left: 0px; |
|
| 6 |
+ height: 100%; |
|
| 7 |
+ width: 100%; |
|
| 8 |
+} |
|
| 9 |
+.modal-wrapper {
|
|
| 10 |
+ background: hsla(0,0%,25%,0.5); |
|
| 11 |
+} |
|
| 12 |
+.modal-wrapper.open {
|
|
| 13 |
+ display: block; |
|
| 14 |
+} |
|
| 15 |
+ |
|
| 16 |
+.modal-wrapper > div {
|
|
| 17 |
+ border: thin solid black; |
|
| 18 |
+ box-shadow: 0em 0em 0.1em #ccc; |
|
| 19 |
+ width: auto; |
|
| 20 |
+ position: absolute; |
|
| 21 |
+ top: 50%; |
|
| 22 |
+ left: 50%; |
|
| 23 |
+ transform: translate(-50%, -50%); |
|
| 24 |
+ -webkit-transform: translate(-50%, -50%); |
|
| 25 |
+ -ms-transform: translate(-50%, -50%); |
|
| 26 |
+ overflow: hidden; |
|
| 27 |
+ box-shadow: 0em 0em 0.2em #444; |
|
| 28 |
+} |
|
| 29 |
+ |
|
| 30 |
+.modal {
|
|
| 31 |
+ position: relative; |
|
| 32 |
+ width: 100%; |
|
| 33 |
+ height: 100%; |
|
| 34 |
+ padding: 1em; |
|
| 35 |
+ background: white; |
|
| 36 |
+} |
| 0 | 37 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,21 @@ |
| 1 |
+<!DOCTYPE html> |
|
| 2 |
+<html lang="en"> |
|
| 3 |
+ <head> |
|
| 4 |
+ <meta charset="UTF-8"> |
|
| 5 |
+ <title></title> |
|
| 6 |
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> |
|
| 7 |
+ <script src="js/myjQModal.jquery.js"></script> |
|
| 8 |
+ <link rel="stylesheet" href="css/myjQModal.css"> |
|
| 9 |
+ </head> |
|
| 10 |
+ <body> |
|
| 11 |
+ <div id="background"></div> |
|
| 12 |
+ <button data-action="open" data-target="#modal">Show!</button> |
|
| 13 |
+ |
|
| 14 |
+ <div id="modal"> |
|
| 15 |
+ Howdy! |
|
| 16 |
+ <form action='#'> |
|
| 17 |
+ <input name="text" type="text"> |
|
| 18 |
+ <input type="submit"> |
|
| 19 |
+ </div> |
|
| 20 |
+ </body> |
|
| 21 |
+</html> |
| 0 | 22 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,33 @@ |
| 1 |
+(function ($) {
|
|
| 2 |
+ |
|
| 3 |
+ $.fn.myjQModal = function() {
|
|
| 4 |
+ 'use strict'; |
|
| 5 |
+ var self=this; |
|
| 6 |
+ $(self).each(function() {
|
|
| 7 |
+ var target = $(this.dataset.target); |
|
| 8 |
+ var action = this.dataset.action; |
|
| 9 |
+ if (action === 'open') {
|
|
| 10 |
+ var modal = $('<div class="modal"></div>');
|
|
| 11 |
+ var wrapper = $('<div class="modal-wrapper"></div>').append(modal);
|
|
| 12 |
+ console.log(target); |
|
| 13 |
+ modal.append(target); |
|
| 14 |
+ modal.wrap('<div>');
|
|
| 15 |
+ $('body').append(wrapper);
|
|
| 16 |
+ wrapper.click(function() {
|
|
| 17 |
+ wrapper.removeClass('open');
|
|
| 18 |
+ }); |
|
| 19 |
+ modal.click(function(ev) {
|
|
| 20 |
+ ev.stopPropagation(); |
|
| 21 |
+ }); |
|
| 22 |
+ } |
|
| 23 |
+ $(this).click(function() {
|
|
| 24 |
+ if (action === 'open') { wrapper.addClass('open'); }
|
|
| 25 |
+ else if (action === 'close') {wrapper.removeClass('open'); }
|
|
| 26 |
+ }); |
|
| 27 |
+ }); |
|
| 28 |
+ return this; |
|
| 29 |
+ }; |
|
| 30 |
+ $(document).ready(function() {
|
|
| 31 |
+ $('button[data-action=open]').myjQModal();
|
|
| 32 |
+ }); |
|
| 33 |
+}( jQuery )); |