Is anyone aware of javascript control/library which converts regular select-option drop down into modal popup based select control?

For example when you click on drop down in below image it opens pop up with options and you can select any option

clicking on above opens below pop up.

Has any one came across any such control? Or I need to develop my own?

Thanks

Is anyone aware of javascript control/library which converts regular select-option drop down into modal popup based select control?

For example when you click on drop down in below image it opens pop up with options and you can select any option

clicking on above opens below pop up.

Has any one came across any such control? Or I need to develop my own?

Thanks

• javascript
• html
• twitter-bootstrap
• angular-ui-bootstrap
• bootstrap-modal

Share Improve this question Follow asked Aug 18, 2016 at 17:26 paresh.bijvaniparesh.bijvani 23311 gold badge44 silver badges1212 bronze badges 2

• you wanna open model on clicking what? – Vish_TS Commented Aug 18, 2016 at 17:44
• I think you would need to develop your own solution and it is pretty easy..Let me know if you need the headstart... – jaysingkar Commented Aug 18, 2016 at 18:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Here's the sample modal

//Listening to click event on the above hidden div
$(document).on('click','#select',function(){
  //Launch the modal on click event
	$('#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
	var option_text = $(this).text();
  //Set the text and value of option 
  $('#selected').text(option_text).val(option_text);
  //Close the modal
	$('#myModal').modal('hide');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./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>

I assume you are using bootstrap. If that is the case you can do something like:

JavaScript

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