fix

2026-11-13 19:06:11 +03:00 · 2024-12-20 06:04:35 +03:00
parent 0f779b7ebf
commit d630370039
267 changed files with 34950 additions and 11 deletions
@@ -0,0 +1,168 @@
+<html>
+<head>
+<title>simple jqModal example</title>
+
+<!-- example page styling -->
+<style>
+div.middle {
+  width: 600px;
+  margin: 2em auto;
+}
+</style>
+
+<!-- jqModal Dependencies -->
+<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+<script type="text/javascript" src="../jqModal.js"></script>
+
+<!--  jqModal Styling -->
+<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />
+
+<!-- example page Styling  -->
+<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
+      type="text/css" rel="stylesheet" />
+
+</head>
+<body>
+
+  <!-- TRIGGER ELEMENTS -->
+
+  <div class="middle">
+    1. <em>Defaults</em> -- <a href="#" class="jqModal">show dialog</a> <br /> Out-of-box behavior. The window and its
+    content is taken "inline" from the element with an ID of 'dialog'. The dialog is "triggered" (shown) when element(s)
+    with class <i>jqModal</i> are clicked. No parameters are passed, no fancy window decorations used.
+  </div>
+
+  <div class="middle">
+    2. <em>Ajax</em> -- <a href="#" class="jqm-trigger-ajax">show dialog</a> <br /> Will open a modal that loads
+    content from a remote server. This page must be served through a webserver to work. <br /> &nbsp;&nbsp; (e.g.
+    http:// and not file://).
+  </div>
+
+  <div class="middle">
+    3. <em>Manual trigger, extend options</em> -- <a href="#" id="trigger-ajax-with-timestamp">show dialog</a> <br />
+    Demonstrates a manual trigger of `jqmShow` as well as updating the options object.
+  </div>
+
+  <div class="middle">
+    4. <em>Manual trigger, modal:true dialog</em> -- <a href="#" id="trigger-modal-dialog">show modal:true dialog</a> <br />
+    Demonstrates a manual trigger of `jqmShow` as well as updating the options object.
+  </div>
+  
+  <div class="middle">
+    5. <em>Ajax Text</em> -- <a href="#" id="trigger-ajax-text">show dialog</a> <br /> Will open a modal whose contents
+    are immediately replaced with predefined text (e.g. a loading indicator). Predefined text is replaced when the server responds
+    with content. This page must be served through a webserver with php support to work. <br /> &nbsp;&nbsp; (e.g.
+    http:// and not file://).
+  </div>
+
+  <!-- MODAL MARKUP (styled via jqModal.css) -->
+
+  <div class="jqmWindow" id="dialog">
+    <a href="#" class="jqmClose">Close</a>
+    <hr>
+    <em>READ ME</em> --> This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this. <br />
+    <br /> Please see the <a href="http://jquery.iceburg.net/jqModal/">jqModal website</a> for more! <br /> <br /> <em>NOTE</em>;
+    You can close windows by clicking the tinted background known as the "overlay". Clicking the overlay will have no
+    effect if the "modal" parameter is passed, or if the overlay is disabled.
+  </div>
+
+
+  <div class="jqmWindow" id="ajax-dialog">
+    <a href="#" class="jqmClose">Close</a>
+    <hr />
+    <div class="ajax-content"><marquee>loading...</marquee></div>
+  </div>
+  
+  
+  <div class="jqmWindow" id="modal-dialog">
+    <a href="#" class="jqmClose">Close</a>
+    <hr />
+    <p>modal: true demonstration</p>
+    <p>Pressing `Esc` or clicking the overlay will NOT close this form</p>
+
+    <input type="text" placeholder="I get focus..." />
+    <br />
+    <select>
+      <option>Option 1</option>
+      <option>Option 2</option>
+    </select>
+  </div>
+  
+  <div class="jqmWindow" id="ajax-text-dialog">
+    <a href="#" class="jqmClose">Close</a>
+    <hr />
+    <div class="ajax-content">I get replaced...</div>
+  </div>
+
+  <!-- MODAL SCRIPT -->
+
+  <script type="text/javascript">
+    $().ready(function() {
+
+      /* Example #1 */
+      $('#dialog').jqm();
+
+      /* Example #2 */
+      $('#ajax-dialog').jqm({
+        trigger: 'a.jqm-trigger-ajax',
+        ajax: 'ajax.php',
+        target: 'div.ajax-content',
+        closeOnEsc: true
+      });
+
+      /* Example #3 */
+      $('#trigger-ajax-with-timestamp').click(function() {
+        var timestamp = new Date().getTime();
+        $('#ajax-dialog').jqm({
+          // update an option
+          ajax: 'ajax.php?timestamp=' + timestamp
+        }).jqmShow(); // show modal
+        return false;
+      });
+
+      /* Example #4 */
+      $('#modal-dialog').jqm({
+        trigger: '#trigger-modal-dialog',
+        modal: true
+      });
+      
+      /* Example #5 */
+      $('#ajax-text-dialog').jqm({
+        trigger: '#trigger-ajax-text',
+        ajax: 'ajax.php?sleep=true',
+        ajaxText: 'Loading ...<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>',
+        target: 'div.ajax-content',
+        closeOnEsc: true
+      });
+    });
+  </script>
+  
+  <style>
+  .glyphicon-spin {
+      -webkit-animation: spin 1000ms infinite linear;
+      animation: spin 1000ms infinite linear;
+  }
+  @-webkit-keyframes spin {
+      0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+      }
+  }
+  @keyframes spin {
+      0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+      }
+  }
+  </style>
+
+</body>
+</html>