Modals now don't slide in

master
Skylar Ittner 8 years ago
parent 0e90d8d922
commit b4b3f320da

@ -15,50 +15,50 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<div id="intro-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="intro-box-header">Welcome to TerranQuest!</h4>
</div>
<div class="modal-body" id="intro-box-body-1">
<!-- First page of text -->
<p>There are seven types of magic in this world. Six elements of nature: water, fire, earth, wind, light, and dark. There is also a seventh element: life. Life is the source of all magical power.</p>
<p>Long ago, the wielders of the six elements were united as one. The magics were harnessed with responsibility and respect.</p>
<p>Then disagreement and discord arose. Some become jealous of others. A great war followed, destroying much life. As a result of this bloodshed, the magic wilted and died.</p>
<p>Over time, the magic sunk deep into the Earth, living on only in dreams. Science forgot magic, and ancient knowledge was lost.</p>
<p>Now, however, the world has come full circle. Science has become magic in a different form. The new sorcerers, scientists, harness the powers of the elements with their modern tools. They know little, but the whispers of ancient power has influenced their actions.</p>
<p>The old is become new. Magic is real, it only seems different. Control the elements and bring peace to the Earth. Channel the powers of magic through your smartphone or tablet. It is up to you to give your technology a true purpose. There are those who do not want unity, who thrive in chaos. They are all the more reason to go out and fight.</p>
<p><em>Will you join the quest?</em></p>
<!-- End of first page -->
</div>
<div class="modal-body" id="intro-box-body-2" style='display: none;'>
<!-- Second page of text -->
<p>You have chosen well.</p>
<p>There is some knowledge you must have now. You must discover the rest of the secrets on your own.</p>
<ol class="list-group">
<li class="list-group-item">Some types of magic are stronger in certain types of terrain.</li>
<li class="list-group-item">Weather can also affect the flow of magic.</li>
<li class="list-group-item">There are strong points of magic near important landmarks.</li>
<li class="list-group-item">These points of magic can be controlled and enhanced by the different elements to achieve good and evil.</li>
</ol>
<!-- End of second page -->
</div>
<div class="modal-footer">
<button type="button" onclick="navigator.app.exitApp();" class="btn btn-danger" id="lolnope-btn"><i class="fa fa-arrow-right"></i> I will not</button>
<button type="button" onclick="gotointropage2();" class="btn btn-success" id="gotopage2-btn"><i class="fa fa-arrow-right"></i> I will</button>
<button type="button" onclick="localStorage.setItem('intro', 'yes');" data-dismiss="modal" class="btn btn-default" style="display: none;" id="close-intro"><i class="fa fa-check"></i> I am ready!</button>
</div>
</div>
</div>
</div>
<script>
function gotointropage2() {
$('#intro-box-body-1').css('display', 'none');
$('#intro-box-body-2').css('display', '');
$('#gotopage2-btn').css('display', 'none');
$('#lolnope-btn').css('display', 'none');
$('#close-intro').css('display', '');
}
<div id="intro-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="intro-box-header">Welcome to TerranQuest!</h4>
</div>
<div class="modal-body" id="intro-box-body-1">
<!-- First page of text -->
<p>There are seven types of magic in this world. Six elements of nature: water, fire, earth, wind, light, and dark. There is also a seventh element: life. Life is the source of all magical power.</p>
<p>Long ago, the wielders of the six elements were united as one. The magics were harnessed with responsibility and respect.</p>
<p>Then disagreement and discord arose. Some become jealous of others. A great war followed, destroying much life. As a result of this bloodshed, the magic wilted and died.</p>
<p>Over time, the magic sunk deep into the Earth, living on only in dreams. Science forgot magic, and ancient knowledge was lost.</p>
<p>Now, however, the world has come full circle. Science has become magic in a different form. The new sorcerers, scientists, harness the powers of the elements with their modern tools. They know little, but the whispers of ancient power has influenced their actions.</p>
<p>The old is become new. Magic is real, it only seems different. Control the elements and bring peace to the Earth. Channel the powers of magic through your smartphone or tablet. It is up to you to give your technology a true purpose. There are those who do not want unity, who thrive in chaos. They are all the more reason to go out and fight.</p>
<p><em>Will you join the quest?</em></p>
<!-- End of first page -->
</div>
<div class="modal-body" id="intro-box-body-2" style='display: none;'>
<!-- Second page of text -->
<p>You have chosen well.</p>
<p>There is some knowledge you must have now. You must discover the rest of the secrets on your own.</p>
<ol class="list-group">
<li class="list-group-item">Some types of magic are stronger in certain types of terrain.</li>
<li class="list-group-item">Weather can also affect the flow of magic.</li>
<li class="list-group-item">There are strong points of magic near important landmarks.</li>
<li class="list-group-item">These points of magic can be controlled and enhanced by the different elements to achieve good and evil.</li>
</ol>
<!-- End of second page -->
</div>
<div class="modal-footer">
<button type="button" onclick="navigator.app.exitApp();" class="btn btn-danger" id="lolnope-btn"><i class="fa fa-arrow-right"></i> I will not</button>
<button type="button" onclick="gotointropage2();" class="btn btn-success" id="gotopage2-btn"><i class="fa fa-arrow-right"></i> I will</button>
<button type="button" onclick="localStorage.setItem('intro', 'yes');" data-dismiss="modal" class="btn btn-default" style="display: none;" id="close-intro"><i class="fa fa-check"></i> I am ready!</button>
</div>
</div>
</div>
</div>
<script>
function gotointropage2() {
$('#intro-box-body-1').css('display', 'none');
$('#intro-box-body-2').css('display', '');
$('#gotopage2-btn').css('display', 'none');
$('#lolnope-btn').css('display', 'none');
$('#close-intro').css('display', '');
}
</script>

@ -15,7 +15,7 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<div id="license-modal" class="modal fade" tabindex="-1" role="dialog">
<div id="license-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">

@ -15,35 +15,35 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<div id="rules-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="rules-box-header">Rules</h4>
</div>
<div class="modal-body" id="rules-box-body">
<p>Please read these rules. Because TerranQuest is a game involving other
people and the environment, it's important to show good etiquette.</p>
<ol class="list-group">
<li class="list-group-item">Do not endanger yourself or others</li>
<li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
<li class="list-group-item">Observe all local laws and rules</li>
<li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
<li class="list-group-item">Be nice to other people and try not to look too creepy</li>
<li class="list-group-item">Respect and minimize your impact on the environment</li>
<li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
<li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
<li class="list-group-item">Socialize with any players of other games, such as Geocaching, Ingress, and Pokémon GO, you might meet</li>
<li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
<!--
<li class="list-group-item"></li>
-->
</ol>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
<div id="rules-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="rules-box-header">Rules</h4>
</div>
<div class="modal-body" id="rules-box-body">
<p>Please read these rules. Because TerranQuest is a game involving other
people and the environment, it's important to show good etiquette.</p>
<ol class="list-group">
<li class="list-group-item">Do not endanger yourself or others</li>
<li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
<li class="list-group-item">Observe all local laws and rules</li>
<li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
<li class="list-group-item">Be nice to other people and try not to look too creepy</li>
<li class="list-group-item">Respect and minimize your impact on the environment</li>
<li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
<li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
<li class="list-group-item">Socialize with any players of other games, such as Geocaching, Ingress, and Pokémon GO, you might meet</li>
<li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
<!--
<li class="list-group-item"></li>
-->
</ol>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>