Как использовать semantic-ui modal

Question

У меня проблема с семантическим ui модальным, когда я нажимаю порядок, я бы показал модальное, но модальное не работает хорошо. После того, как я набрал порядок заказа, модальный только что показал, а затем закрыл сам.

посмотреть код

 <div class = "ui form grid_6 omega"> 
     <form target="paypal" method="post"> 
      <div class="field1"> 
      <div class="field"> 
       <label>Nama</label> 
       <input placeholder="Nama" name="nama" type="text"> 
      </div> 
      <div class="field"> 
       <label>No. HP</label> 
       <input placeholder="No. HP" name="handphone" type="text"> 
      </div> 
      <div class="field"> 
       <label>Alamat</label> 
       <input placeholder="alamat" name="alamat" type="text"> 
      </div> 
      <div class="field"> 
       <label>Jumlah</label> 
       <div class="selectbox"> 
        <select name="jumlah" id=""> 
        <?php for ($i=1; $i <= 20; $i++): ?> 
        <option value="<?php echo $i; ?>"><?php echo $i; ?></option> 
        <?php endfor; ?> 
       </select> 
       </div> 

      </div> 
      <button type="submit" name="submit" class="ui teal button order-button">Order now</button> 
      </div> 
     </form> 
     </div> 

     <div id="modaldiv" class="ui small modal"> 
       <i class="close icon"></i> 
       <div class="header"> 
        Smalls Like Bakin 
       </div> 
       <div class="content"> 
        <p>Thank you for your order</p> 
       </div> 
       <div class="actions"> 
        <div class="ui positive right labeled icon button"> 
        <a class="text-white" href="<?php echo site_url('home/order');?>">Back to Home</a> 
        <i class="checkmark icon"></i> 
        </div> 
       </div> 
       </div> 

модальный сценарий

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>packaged/javascript/semantic.js"></script> 
<script type="text/javascript"> 
    $('.order-button').click(function(){ 
     $('#modaldiv').modal('show'); 
    }); 

</script> 

вы можете помочь мне решить эту проблему? Спасибо.

Answer 1

он будет работать:

$('#btn').click(function(){ 
    //do something 
    this.preventDefault(); 
}); 

Answer 2

я "рубить" в коде semantic.js (v 1.8.1.), В строке 5831, где модальные параметры установлены. Вместо

close : '.close, .actions .button', 

Я просто поставил:

close : '.close', 

Это потому, что я хотел то же самое поведение всего приложения. Смысл этой строки заключается в том, «какие селекторы будут закрывать модальные?».

Answer 3

Обязательно добавьте соответствующие файлы JS и CSS для компонентов «переход» и «диммер», так как они используются в семантических модалях, а также в «модальном» компоненте.

Answer 4

У меня была такая же проблема, но с щелчком мыши, чтобы открыть modal в <a> элементов, было удалено полностью атрибут href. В этом случае возможно связано с событием submit.