Feedback modal mit Sternbewertung

Question

Ich habe ein Feedback-modal, in dem ich Bewertungen, die einfach mit +, _ Zeichen für verschiedene Arten von Bewertungen - Schlechte, fair, gut, sehr gut, Ausgezeichnet. Jetzt muss ich dieses Design in Sterne umwandeln. Mein Modal ist bootstrap modal. Gibt es eine Möglichkeit, meinen Code in die Sterne-Kategorie zu verschieben? Ich habe keine Ahnung, wie ich die Sternanimation für die Sternenbewertung umsetzen kann.

Meine aktuellen Code für Feedback modal unten ist

 <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

Wie pro Ihre Anforderung, i Demo jQuery Bewertung Plugin Feedback modalen Popup hinzugefügt haben, Hoffnung das funktioniert

diesen Code ausprobieren:

$(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

Um Ihre Etiketten zu bewahren, habe ich eine andere plug in verwendet. Ich habe nur die Etiketten auf Ihre Eingabefeld:

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

Snippet:

$('#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>