별표 평점을 포함한 의견 모달

Question

나는 여러 가지 유형의 평점에 대해 +, _ 기호를 사용하여 등급을 매기는 피드백 모달을가집니다. - 나쁨, 공정함, 좋음, 매우 좋음, 우수함. 이제이 디자인을 별표 등급으로 옮겨야합니다. 내 모달은 부트 스트랩 모달입니다. 별표 등급으로 코드를 옮길 수있는 방법이 있습니까? 별 등급에 별 애니메이션을 구현하는 방법을 모르겠습니다. 피드백 모달 대한

내 현재 코드는 아래의 요구 사항에 따라, 당신의 의견을 모달 팝업에 데모 jQuery를 평가 플러그인을 추가 한

 <div class="modal fade" id="myModal1" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Feedback</h4> 
    </div> 
    <div class="modal-body"> 
    <div id="message" style="text-align: center; color: green;"></div> 
            <div class="form-group"> 
            <span id="updatecapacitymodalerrortext" style="color:red"></span> 
             </div> 
             <div class="form-group" > 
             </br> 
             &nbsp;<label>Your Name : </label> 
             </br><input type="text" class="form-control" size="10" style="width:50px;" id="capacity_txt_modal" /> 
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
             <br/> 

<div class="feedback"> 
     <div class="feedbackCl" > 
     <input id="overall_0" name="overall" id="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l"> 
     <label for="overall_0" class="labelClass"> 
     <span class="sight">— —</span> 
     <span class="screen_reader" id="o1-l">Poor</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_1" name="overall" id="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l"> 
     <label for="overall_1" class="labelClass"> 
     <span class="sight">—</span> 
     <span class="screen_reader" id="o2-l">Fair</span> 
     </label> 

    </div> 
    <div class="feedbackCl"> 
     <input id="overall_2" name="overall" id="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l"> 
     <label for="overall_2" class="labelClass"> 
     <span class="sight">+ —</span> 
     <span class="screen_reader" id="o3-l">Good</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_3" name="overall" id="overall" type="radio" value="4" tabindex="0" aria-describedby="o4-l"> 
     <label for="overall_3" class="labelClass"> 
     <span class="sight">+</span> 
     <span class="screen_reader" id="o4-l">Very Good</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_4" name="overall" id="overall" type="radio" value="5" tabindex="0" aria-describedby="o5-l"> 
     <label for="overall_4" class="labelClass"> 
     <span class="sight">+ +</span> 
     <span class="screen_reader" id="o5-l">Excellent</span> 
     </label> 
    </div> 
    </div> 
    <label for="input-1" class="control-label">Rate This</label> 
    <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1"> 
    <button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
    <button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
    </div> 

Answer 1

입니다, 희망이

이 코드를 사용해보십시오 작동합니다 :

$(function() { 
 
     
 
     $("#rateYo").rateYo({ 
 
     
 
     onSet: function (rating, rateYoInstance) { 
 
      rating = Math.ceil(rating); 
 
      $('#rating_input').val(rating);//setting up rating value to hidden field 
 
      alert("Rating is set to: " + rating); 
 
     } 
 
     }); 
 
    });

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script> 
 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 

 
<div id="myModal" class="modal fade" role="dialog"> 
 
<div class="modal-dialog"> 
 

 

 
<div class="modal-content"> 
 
<div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
    <h4 class="modal-title">Feedback</h4> 
 
</div> 
 
<div class="modal-body"> 
 
<div id="message" style="text-align: center; color: green;"></div> 
 
           <div class="form-group"> 
 
           <span id="updatecapacitymodalerrortext" style="color:red"></span> 
 
            </div> 
 
            <div class="form-group" > 
 
            <label style="display:inline-block" class="col-md-4">Your Name : </label> 
 
            <div style="display:inline-block;" class="col-md-6"><input type="text" class="form-control" size="10" id="capacity_txt_modal" /> 
 
            </div> 
 

 
</div> 
 
<label style="display:inline-block;" for="input-1" class="control-label">Rate This</label> 
 
<div style="display:inline-block;" id="rateYo"></div> 
 
<input type="hidden" name="rating" id="rating_input"/> 
 
<br/> 
 
<button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
 
<button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close</button> 
 
</div> 
 
</div> 
 
<div class="modal-footer"> 
 
</div> 
 

 
</div> 
 
</div>

Answer 2

라벨을 보존하기 위해 다른 plug in을 사용했습니다.

data-star-captions='["Not Rated", "Poor", "Fair","Good","Very Good","Excellent"]' 

코드 조각 : 나는 당신이 그것을 할 몇 가지 JQuery와 평가 플러그인을 구현해야 생각

$('#myModal1').modal('show');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script> 
 

 

 
<div class="modal fade" id="myModal1" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Feedback</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <div id="message" style="text-align: center; color: green;"></div> 
 
       <div class="form-group"> 
 
        <span id="updatecapacitymodalerrortext" style="color:red"></span> 
 
       </div> 
 
       <div class="form-group"> 
 
        </br> 
 
        &nbsp;<label>Your Name : </label> 
 
        </br><input type="text" class="form-control" size="10" id="capacity_txt_modal"/> 
 
        <br/> 
 

 
        <div class="feedback"> 
 
         <label for="input-1" class="control-label">Rate This</label> 
 
         <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" 
 
           data-step="1" data-star-captions='["Not Rated", "Poor", "Fair","Good","Very Good","Excellent"]'> 
 
        </div> 
 
        <button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
 
        <button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close 
 
        </button> 
 
       </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>