弹出式签名不起作用

Popup signin not working

本文关键字：不起作用 弹出式      更新时间：2023-09-26

我做了一个弹出式签名，当点击签名按钮时，会弹出名称和密码字段，还有一个关闭符号，点击它会关闭弹出窗口，但即使提供了文档准备功能，它也不起作用

  <html>
 <head>
 <title>Untitled Document</title>
 <script> 
 $( document ).ready(function() {
 $('.toggleModal').on('click', function (e) {  
   $('.modal').toggleClass('active');  
 });
 });
 </script>
 <style>
 @import "compass/css3/shared";
 @font-face {
   font-family: 'ios7-icon';
   src:
     url('http://ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff')           format('woff'),
url('http://ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf')      format('ttf');
   font-weight: normal;
   font-style: normal;
 }
 $blue : #007aff;
 $green : #4dd865;
 $red : #ff3b30;
 $white : #ffffff;
 $black : #000000;
 *, *:before, *:after {
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:      border-box;
 }
 body {
   padding: 50px;
   font-family: 'Helvetica Neue' !important;
   font-weight: 300;
 }
 .wrapper {
     max-width: 500px;
     margin: 0 auto;
 }
 h1 {
   font-weight: 100;
   font-size: 45px;
   color: $blue;
 }
 h2 {
   font-weight: 500;
   font-size: 21px;
   margin-bottom: 15px;
 }
 section {
 margin-top: 30px;  
   p {
 line-height: 1.4;
 margin-bottom: 20px;
 }
  }
 button {
   @include experimental('appearance', 
     none, 
     webkit, moz, o, ms, not khtml);
   @include border-radius(5px);
   border: none;
   outline:none;
   font: inherit;
   cursor: pointer;
   margin: 0;
   padding: 0;
   background: $white;
   color: $blue;
   font-weight: 300;
   font-size: 16px;
   @include border-radius(0px); 
   &:hover {
     text-decoration: underline;
   }
 /*  &:last-child {
     border-color: red;
     margin-bottom: 0;
   }*/
   &.button-border {  
     @include border-radius(5px);
     padding: 10px 12px 8px 12px;
     border: 1px solid $blue;  
     &:hover {
       background: $blue;
       color: $white;
       text-decoration: none;
     }   
        }
        &.button-success {
          color: $green;
     border-color: $green;
     &:hover {
       background: $green;
     }
   }
   &.button-error {
   color: $red;
     border-color: $red;
     &:hover {
       background: $red;
     }
   }  
 }
 .modal {   
        display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   width: 400px;
   height: auto;
   margin-left: -200px;
   margin-top: -150px;
   background-color: $white;
   padding: 25px;
   border-radius: 5px;
   z-index: 10;
   box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
   &.active {
     display: block;
   } 
   header {
     position: relative;
   }
   h2 {
     text-align: center;
   }
   .close {
     position: absolute;
     top: 3px;
     right: 0;
     margin: 0;
   }
      }
 .pull-right {
   float: right;  
 }
 .icon {
   display: inline-block;
   font-size: inherit;
   font-family: 'ios7-icon';
   margin-right: 5px;
   color: inherit;
   -webkit-text-rendering: geometricPrecision;
   -moz-text-rendering: geometricPrecision;
   -ms-text-rendering: geometricPrecision;
   -o-text-rendering: geometricPrecision;
   text-rendering: geometricPrecision;
 }
 </style>
 </head>
 <body>
 <div class="wrapper"> <section>
    <button class="button-border toggleModal">
       sign in
  </button>
   </section>
   <div class="modal">
     <header>
       <h2>Sign in</h2>
       <button class="close toggleModal">Close</button>
     </header>  
     <section>
       <input style="margin-bottom: 15px;" type="text"      placeholder="Username" id="username" name="username">
                            <input style="margin-bottom: 15px;"      type="password" placeholder="Password" id="password" name="password">                              
                            <input class="login-sub" type="submit" id="sign-in" value="Sign In">
  </section> 
  </div> 
  </body>
  </html>

检查模态是否被隐藏，代码中是否缺少活动类，您可以切换可见性：

 $( document ).ready(function() {
     $('.toggleModal').on('click', function (e) {  
         $('.modal').toggle();  
     });
 });

工作小提琴这里

 <html>
 <head>
 <title>Untitled Document</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 <script> 
 jQuery(document).ready(function(){    
 $( document ).ready(function() {
 $('.toggleModal').click(function () {
   $('.modal').toggle();  
 });
 });
 });
 </script>
 <style>
 @import "compass/css3/shared";
 @font-face {
   font-family: 'ios7-icon';
   src:
     url('http://ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff')           format('woff'),
url('http://ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf')      format('ttf');
   font-weight: normal;
   font-style: normal;
 }
 $blue : #007aff;
 $green : #4dd865;
 $red : #ff3b30;
 $white : #ffffff;
 $black : #000000;
 *, *:before, *:after {
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:      border-box;
 }
 body {
   padding: 50px;
   font-family: 'Helvetica Neue' !important;
   font-weight: 300;
 }
 .wrapper {
     max-width: 500px;
     margin: 0 auto;
 }
 h1 {
   font-weight: 100;
   font-size: 45px;
   color: $blue;
 }
 h2 {
   font-weight: 500;
   font-size: 21px;
   margin-bottom: 15px;
 }
 section {
 margin-top: 30px;  
   p {
 line-height: 1.4;
 margin-bottom: 20px;
 }
  }
 button {
   @include experimental('appearance', 
     none, 
     webkit, moz, o, ms, not khtml);
   @include border-radius(5px);
   border: none;
   outline:none;
   font: inherit;
   cursor: pointer;
   margin: 0;
   padding: 0;
   background: $white;
   color: $blue;
   font-weight: 300;
   font-size: 16px;
   @include border-radius(0px); 
   &:hover {
     text-decoration: underline;
   }
 /*  &:last-child {
     border-color: red;
     margin-bottom: 0;
   }*/
   &.button-border {  
     @include border-radius(5px);
     padding: 10px 12px 8px 12px;
     border: 1px solid $blue;  
     &:hover {
       background: $blue;
       color: $white;
       text-decoration: none;
     }   
        }
        &.button-success {
          color: $green;
     border-color: $green;
     &:hover {
       background: $green;
     }
   }
   &.button-error {
   color: $red;
     border-color: $red;
     &:hover {
       background: $red;
     }
   }  
 }
 .modal {   
        display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   width: 400px;
   height: auto;
   margin-left: -200px;
   margin-top: -150px;
   background-color: $white;
   padding: 25px;
   border-radius: 5px;
   z-index: 10;
   box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
   &.active {
     display: block;
   } 
   header {
     position: relative;
   }
   h2 {
     text-align: center;
   }
   .close {
     position: absolute;
     top: 3px;
     right: 0;
     margin: 0;
   }
      }
 .pull-right {
   float: right;  
 }
 .icon {
   display: inline-block;
   font-size: inherit;
   font-family: 'ios7-icon';
   margin-right: 5px;
   color: inherit;
   -webkit-text-rendering: geometricPrecision;
   -moz-text-rendering: geometricPrecision;
   -ms-text-rendering: geometricPrecision;
   -o-text-rendering: geometricPrecision;
   text-rendering: geometricPrecision;
 }
 </style>
 </head>
 <body>
 <div class="wrapper"> <section>
    <button class="button-border toggleModal">
       sign in
  </button>
   </section>
   <div class="modal">
     <header>
       <h2>Sign in</h2>
       <button class="close toggleModal">Close</button>
     </header>  
     <section>
       <input style="margin-bottom: 15px;" type="text"      placeholder="Username" id="username" name="username">
                            <input style="margin-bottom: 15px;"      type="password" placeholder="Password" id="password" name="password">                              
                            <input class="login-sub" type="submit" id="sign-in" value="Sign In">
  </section> 
  </div> 
  </body>
  </html>

我添加

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

和更新：

<script> 
 jQuery(document).ready(function(){    
 $( document ).ready(function() {
 $('.toggleModal').click(function () {
   $('.modal').toggle();  
 });
 });
 });
 </script>
相关文章：