user3749559 user3749559 - 1 year ago 91
HTML Question

Javascript select control using modal popup

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

enter image description here

clicking on above opens below pop up.

enter image description here

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


Answer Source

Here's the sample modal

//Listening to click event on the above hidden div
  //Launch the modal on click event

//Listen to click event on Modal's buttons having class option
  //Extract the text of the clicked element
	var option_text = $(this).text();
  //Set the text and value of option 
  //Close the modal
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" type="text/css" href="">
<!-- Your Select Tag, it is readonly to prevent dropdown-->
<Select name="select"  readonly>
  <option id="selected" value="1" selected>Option 1</option> 
<!-- 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 class="modal-body">
        <div class="btn btn-primary option">
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>