-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b18a6e7
commit ee1538f
Showing
7 changed files
with
402 additions
and
5 deletions.
There are no files selected for viewing
Binary file not shown.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* | ||
| To change this license header, choose License Headers in Project Properties. | ||
| To change this template file, choose Tools | Templates | ||
| and open the template in the editor. | ||
| */ | ||
| /* | ||
| Created on : 11.06.2016, 1:27:54 | ||
| Author : KnightDanila | ||
| */ | ||
|
|
||
| /* The Modal (background) */ | ||
| .modal-window { | ||
| display: none; /* Hidden by default */ | ||
| position: fixed; /* Stay in place */ | ||
| z-index: 1000; /* Sit on top */ | ||
| padding-top: 7%; /* Location of the box */ | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; /* Full width */ | ||
| height: 100%; /* Full height */ | ||
| overflow: auto; /* Enable scroll if needed */ | ||
| background-color: rgb(0,0,0); /* Fallback color Black */ | ||
| background-color: rgba(0,0,0,0.4); /* If opacity work it will be like gloss*/ | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| /* | ||
| * To change this license header, choose License Headers in Project Properties. | ||
| * To change this template file, choose Tools | Templates | ||
| * and open the template in the editor. | ||
| */ | ||
| /** | ||
| How to use it: | ||
| IN HTML | ||
| <!-- Trigger/Open The Modal --> | ||
| <button id="myBtn">Open Modal</button> | ||
| <!-- The Modal --> | ||
| <div id="myModal"> | ||
| <!-- Modal content --> | ||
| <div id = "modalContent"> | ||
| <div id = "close">X</div> | ||
| <p>Some text in the Modal..</p> | ||
| </div> | ||
| </div> | ||
| THEN IN JS | ||
| modalWindowInit("myModal", "modalContent", "myBtn", "close"); | ||
| modalWindowTotalCloseBackground(); | ||
| modalWindowAddCloseElemStyle("close", "MW-close-btn-fpm3d-dark"); | ||
| modalWindowAddContentStyle("modalContent", "MW-content-fpm3d-dark"); | ||
| ALSO NEED | ||
| <link rel="stylesheet" href="js/modelWindow/modelWindow.css"> | ||
| <link rel="stylesheet" href="js/modelWindow/modelWindowStyles.css"> | ||
| <script src="js/modelWindow/modelWindow.js"></script> | ||
| **/ | ||
|
|
||
|
|
||
| // One global weriable | ||
| var MW_OPEN_ONCE = 0; | ||
| // Create from simple objects a modal windows. Itself adds styles | ||
| function modalWindowInit(winElemID, winElemContentID, openElemID, closeElemID) { | ||
| // Get the modal | ||
| var modal = document.getElementById(winElemID); | ||
| // Get the button that opens the modal | ||
| var btn = document.getElementById(openElemID); | ||
| // Get the <span> element that closes the modal | ||
| var span = document.getElementById(closeElemID); | ||
| // Get the modal content | ||
| var content = document.getElementById(winElemContentID); | ||
|
|
||
| content.className += "MW-content-simple"; | ||
| modal.className += "modal-window"; | ||
| span.className += "MW-close-btn-simple"; | ||
| // When the user clicks the button, open the modal | ||
| btn.onclick = function () { | ||
| modal.style.display = "block"; | ||
| } | ||
|
|
||
| // When the user clicks on <span> (x), close the modal | ||
| span.onclick = function () { | ||
| modal.style.display = "none"; | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
|
|
||
| content.onclick = function () { | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
| } | ||
| function modalWindowInitFull(winElemID, winElemContentID, winElemContentStyle, | ||
| openElemID, closeElemID, closeElemStyle) { | ||
| // Get the modal | ||
| var modal = document.getElementById(winElemID); | ||
| // Get the button that opens the modal | ||
| var btn = document.getElementById(openElemID); | ||
| // Get the <span> element that closes the modal | ||
| var span = document.getElementById(closeElemID); | ||
| // Get the modal content | ||
| var content = document.getElementById(winElemContentID); | ||
|
|
||
| modal.className += "modal-window"; | ||
| content.className += winElemContentStyle; | ||
| span.className += closeElemStyle; | ||
| // When the user clicks the button, open the modal | ||
| btn.onclick = function () { | ||
| modal.style.display = "block"; | ||
| } | ||
|
|
||
| // When the user clicks on <span> (x), close the modal | ||
| span.onclick = function () { | ||
| modal.style.display = "none"; | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
|
|
||
| content.onclick = function () { | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
| } | ||
| function modalWindowInitFullBG(winElemID, winElemContentID, winElemContentStyle, | ||
| openElemID, closeElemID, closeElemStyle, useBackgroundClose) { | ||
| // Get the modal | ||
| var modal = document.getElementById(winElemID); | ||
| // Get the button that opens the modal | ||
| var btn = document.getElementById(openElemID); | ||
| // Get the <span> element that closes the modal | ||
| var span = document.getElementById(closeElemID); | ||
| // Get the modal content | ||
| var content = document.getElementById(winElemContentID); | ||
|
|
||
| modal.className += "modal-window"; | ||
| content.className += winElemContentStyle; | ||
| span.className += closeElemStyle; | ||
| // When the user clicks the button, open the modal | ||
| btn.onclick = function () { | ||
| modal.style.display = "block"; | ||
| } | ||
|
|
||
| // When the user clicks on <span> (x), close the modal | ||
| span.onclick = function () { | ||
| modal.style.display = "none"; | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
|
|
||
| content.onclick = function () { | ||
| MW_OPEN_ONCE = 1; | ||
| } | ||
| if (useBackgroundClose) { | ||
| modal.onclick = function () { | ||
| if (MW_OPEN_ONCE == 0) { | ||
| modal.style.display = "none"; | ||
| } | ||
| MW_OPEN_ONCE = 0; | ||
| } | ||
| } | ||
| } | ||
| // Add style function NEED TO TEST | ||
| function modalWindowAddCloseElemStyle(closeElemID, ClassName) { | ||
| var span = document.getElementById(closeElemID); | ||
| span.className += " " + ClassName; | ||
| } | ||
| function modalWindowAddContentStyle(contentElemID, ClassName) { | ||
| var content = document.getElementById(contentElemID); | ||
| content.className += " " + ClassName; | ||
| } | ||
| // When the user clicks anywhere outside of the modal, close it NEED TO TEST - can shake all names and other | ||
| function modalWindowTotalCloseBackground() { | ||
| var total = document.getElementsByClassName("modal-window").length; | ||
| var modal; | ||
| for (var i = 0; i < total; i++) { | ||
| model = document.getElementsByClassName("modal-window")[i]; | ||
| modal.onclick = function () { | ||
| if (MW_OPEN_ONCE == 0) { | ||
| modal.style.display = "none"; | ||
| } | ||
| MW_OPEN_ONCE = 0; | ||
| } | ||
| } | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /* | ||
| To change this license header, choose License Headers in Project Properties. | ||
| To change this template file, choose Tools | Templates | ||
| and open the template in the editor. | ||
| */ | ||
| /* | ||
| Created on : 11.06.2016, 1:29:17 | ||
| Author : KnightDanila | ||
| */ | ||
|
|
||
| .MW-content-fpm3d{ | ||
| background-color: rgb(27, 28, 31); | ||
| margin: auto; | ||
| padding: 20px; | ||
| border: 1px solid #0FF; | ||
| width: 80%; | ||
| height: 70%; | ||
| color: white; | ||
| -webkit-box-shadow: 0px 8px 56px 4px rgba(0,255,255,0.75); | ||
| -moz-box-shadow: 0px 8px 56px 4px rgba(0,255,255,0.75); | ||
| box-shadow: 0px 8px 56px 4px rgba(0,255,255,0.75); | ||
| } | ||
| /* The Close Button */ | ||
| .MW-close-btn-fpm3d{ | ||
| color: #fff; | ||
| float: right; | ||
| font-size: 28px; | ||
| font-weight: bold; | ||
| } | ||
| .MW-close-btn-fpm3d:hover, | ||
| .MW-close-btn-fpm3d:focus { | ||
| color: #0ff; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } |
Oops, something went wrong.