about modals

css/main.css

@@ -71,6 +71,11 @@ a.btn:visited, a.btn:focus{
     color: white;
 }
 
+button{
+    border: 0;
+    outline: none;
+}
+
 .editable{
     color:#34495e;
     height: 42px;
@@ -288,7 +293,9 @@ svg{
     margin: 0 18px;
 }
 
-#aboutError{
+.about.floatRight{
     margin-right: 10px;
     color: #34495e;
+    font-size: 18px;
+    line-height: 18px;
 }

index.html

@@ -425,11 +425,11 @@
     <div class="indent">
         <label class="radio">
             <input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
-            Compliant Dynamic Simulation
+            Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>
         </label>
         <label class="radio">
             <input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
-            Compliant Static Simulation (not finished yet)
+            Compliant Static Simulation (not finished yet) <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>
         </label>
     </div><br/>
     <b>Fold Settings:</b><br/><br/>
@@ -438,7 +438,7 @@
         <input value="" placeholder="" class="form-control" type="text">
     </div>
     <br/><br/><br/>
-    <b>Stiffness Settings:</b><br/><br/>
+    <b>Stiffness Settings:</b><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
     <div class="sliderInput" id="axialStiffness">
         <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
         <input value="" placeholder="" class="form-control" type="text">
@@ -457,7 +457,10 @@
     </div>
     <br/><br/>
     <b>Error:</b><br/>
-    <div class="indent"> Average Error (per node): <span id="globalError"></span><a class="floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a></div>
+    <div class="indent">
+        <label>Average Error (per node): <span id="globalError"></span></label>
+        <a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a>
+    </div>
 
     <div class="extraSpace"></div>
 </div>
@@ -625,5 +628,47 @@
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+<div class="modal fade" id="aboutStiffnessModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-med">
+        <div class="modal-content">
+            <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <p><b>Stiffness Settings</b><br/><br/>
+                    ....
+                </p>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<div class="modal fade" id="aboutDynamicSimModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-med">
+        <div class="modal-content">
+            <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <p><b>Compliant Dynamic Simulation</b><br/><br/>
+                    ....
+                </p>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<div class="modal fade" id="aboutStaticSimModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-med">
+        <div class="modal-content">
+            <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <p><b>Compliant Static Simulation</b><br/><br/>
+                    ....
+                </p>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
 </body>
 </html>
\ No newline at end of file

js/controls.js

@@ -396,6 +396,15 @@ function initControls(globals){
     setLink("#aboutError", function(){
         $("#aboutErrorModal").modal("show");
     });
+    setLink("#aboutStiffness", function(){
+        $("#aboutStiffnessModal").modal("show");
+    });
+    setLink("#aboutDynamicSim", function(){
+        $("#aboutDynamicSimModal").modal("show");
+    });
+    setLink("#aboutStaticSim", function(){
+        $("#aboutStaticSimModal").modal("show");
+    });
 
     function setButtonGroup(id, callback){
         $(id+" a").click(function(e){