Javascript Steuerelement mit modalen Popup auswählen

Question

Ist jemand bewusst von Javascript-Steuerelement/Bibliothek, die regelmäßige Select-Option Drop-Down in modale Popup-basierte Select-Steuerelement konvertiert?

Zum Beispiel, wenn Sie auf Drop klicken unten im Bild unten öffnet es Pop mit Optionen und Sie können eine beliebige Option auswählen

klicken, um oben auf öffnet unter Pop-up.

Hat jemand kam in eine solche Kontrolle? Oder ich muss mein eigenes entwickeln?

Dank

Answer 1

Hier ist die Probe modal

//Listening to click event on the above hidden div 
 
$(document).on('click','#select',function(){ 
 
    //Launch the modal on click event 
 
\t $('#myModal').modal(); 
 
}); 
 

 
//Listen to click event on Modal's buttons having class option 
 
$(document).on('click','.option',function(){ 
 
    //Extract the text of the clicked element 
 
\t var option_text = $(this).text(); 
 
    //Set the text and value of option 
 
    $('#selected').text(option_text).val(option_text); 
 
    //Close the modal 
 
\t $('#myModal').modal('hide'); 
 
});

<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> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- Your Select Tag, it is readonly to prevent dropdown--> 
 
<Select name="select" readonly> 
 
    <option id="selected" value="1" selected>Option 1</option> 
 
</Select> 
 
<!-- Hidden div to get the click events--> 
 
<div id="select" style="position:absolute; left:0; right:0; top:0; bottom:0;"></div> 
 

 
<!-- Example Modal, make the required changes --> 
 
<div id="myModal" class="modal fade" 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">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="btn btn-primary option"> 
 
      Hello 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

Ich nehme an, Sie Bootstrap verwenden.

JavaScript

$(window).load(function(){ 
    $("#dropdown").change(function(){ 
     $('#myModal').modal('show'); 
     var selected = $("#dropdown").val(); 
     $(selected).addClass("active"); 
    } 
});