2017-01-10 6 views
0

저는이 웹 사이트에 selectpicker을 구현하고 있습니다. selectpicker 클래스를 가진 요소가 DOM에 표시되지 않는 문제가 발생했습니다.부트 스트랩 - 모달이 작동하지 않습니다.

여기

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Add New Experience</h4> 
    </div> 

     <div id="addExperience" class="modal-body"> 
      <div class="form-horizontal"> 
       <div class="form-group"> 
           <div class="col-md-12"> 
            <select class="user-form selectpicker show-tick form-control" data-live-search="true"> 
             <option>A</option> 
            </select> 
           </div> 
          </div> 
      </div> 

     </div> 
    </div> 
</div> 

이 내 개발 트랙에 얻을 수 있도록하시기 바랍니다 코드를입니다.

감사합니다.

+0

가 내 말에 표시되지 않는 이유를 모르겠어요 나 https://plnkr.co/edit/HHxNkpbUITBQJBSHaJQ8?p=preview – Deep

+0

에 좋아 보인다. 나는 항상이 CSS 속성을 내'select.selectpicker {display : none! important;'에게주었습니다.이 문제를 해결하는 방법을 알고 계십니까? – Terence

+0

완전한 코드로 플 런커를 만들 수 있습니까? 살펴보기 – Deep

답변

0

당신은

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/i18n/defaults-en_US.js"></script> 

사물이 잘 작동 :)

나를 실제 코드는 여전히 plunker과 다른 경우에 알려 당신의 plunker 예에서 아래 필요한 자원을 추가해야합니다.

예 : https://plnkr.co/edit/4gJBAu3NKUQp1HMUbrK9?p=preview

관련 문제