semantic-ui modal 사용 방법

Question

semantic-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

내가 모달 설정이 설정되어 라인 5831에서의 semantic.js 코드 (. V 1.8.1)의 "해킹"않았다. 대신

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

의 난 그냥 넣어 :

close : '.close', 

이것은 내가 모든 응용 프로그램에서 동일한 동작을 원하기 때문이다. 그 선의 의미는 "어떤 선택자가 모달을 닫을 것인가?"입니다.

Answer 3

시맨틱 모달과 '모달'구성 요소 자체에서 사용되는 '전환'및 '조광'구성 요소에 해당하는 JS 및 CSS 파일을 추가해야합니다.

Answer 4

동일한 문제가 있었지만 클릭하여 <a> 요소의 모달을 열 때 솔루션은 완전히 href 속성을 제거했습니다. 이 경우 버튼에 submit 이벤트와 관련이있을 수 있습니다.