Question

嘿所以我试图在我的表单中放置一个模态按钮，这样当他们点击继续它会弹出，但每次我把按钮放在表单中时它点击时都不会激活？即使将按钮放在表单的div中也不会允许它在单击时激活。我究竟做错了什么？

此外，如果这是一个无法解决的问题，我如何把按钮放在包含表格的div下面？

由于

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Raleway:300');

.login-page {
  width: 360px;
  padding: 0% 0 0;
  margin: auto;
}
.login-logo, .register-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}
input, label {
    display:block;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 10px 45px 45px 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    margin-top: 100px
}
.form input {
  font-family: "raleway", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "raleway", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #5eafe4;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

＆＃13;

<!doctype html>
<html>
<head>


<link href="" rel="stylesheet">
<link href="" rel="">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

 
</head>
    
<body>
<div class="login-page">
    
  
   <form class="ui form">
        <div class="login-logo">
        <a href=""><img src="" alt="My Ad Cubes"></a>
    </div>
       <div class="field">
    <label style="float: left">Password:</label>
     <input type="text" name="last-name" placeholder="">
    
  </div>
     <div class="field">
    <label style="float: left">Confirm Password:</label>
    <input type="text" name="last-name" placeholder="">
  </div>
       <div>
        <label style="float: left">Who? </label>
   <select class="ui search dropdown"> 
        <option value="">Select</option>
        <option value="">1</option>
       <option value="">2</option>
        <option value="">3</option>
       <option value="">Other</option>
       </select>
       </div>  
       <button class="ui button" role="button" id="mymodalg">
           Continue
       </button>
        
        </form> 
    
    
     </div>
    
   
    <!---    
        <button class="ui button" role="button" id="mymodalg">
           Continue
       </button>
        
        --->
    
    
    
    
    
    <div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="image content">
    <div class="image">
      An image can appear on left or an icon
    </div>
    <div class="description">
      A description can appear on the right
    </div>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui button">OK</div>
  </div>
</div>
    
    
    
    

   
</body>
<script type="text/javascript">
    $('.ui.sticky')
  .sticky({
    context: '#example2',
    pushing: true
  });
 </script>

    
<script type="text/javascript">    
     $(document).ready(function(){
     $('#logIn').click(function(){
        $('#modaldiv').modal('show');    
     });
});
</script>
    
   
    
    <script type="text/javascript">
    $('.ui.modal')
  .modal('attach events', '#mymodalg', 'show')
;
    </script>
    
</html>

＆＃13;

模态按钮不会在窗体内部工作：语义UI

0 个答案: