how to design the below popup with background over lay

     <div  id="myModal" class="modal fade overlay">
                    <div class="modal-dialog">
                        <div class="modal-content">
                             <div class="modal-body">
                                <p>One fine body…</p>
                           
                              <div style="padding: 15px;">
                                <button type="button"style="background-color:rgb(35,53,110);color:white;float:right;">filter</button>
                            </div>
                                 </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>

This is my html popup code 

<img class="img-responsive" src="../images/btn_filter.png.png" alt="filter" title="Filter" style="float: right; padding-right: 20%;"  data-toggle="modal" data-target="#myModal"/>

This is my image  to open the popup. how i will show the popup as shown in figure and overlay the background