title: How to make div hide and show as like popup window?
body: <p>I am new to jQuery. I am trying to create a search box functionality in my project. I have created a div which contains names of cities, and I want it to be displayed on the click event of a button. I am able to hide and show that div using <code>slideToggle()</code> method of jQuery on the click event of a button.
  But when div is displayed, then other contents of my page gets distracted. I do not expect this behavior.</p>
  
  <p>Here is my image before displaying that div:</p>
  
  <p><img src="https://i.stack.imgur.com/HkJ8t.png" alt="enter image description here"></p>
  
  <p>and the following is an image of the page after div is displayed:</p>
  
  <p><img src="https://i.stack.imgur.com/Eu9Kx.png" alt="enter image description here"></p>
  
  <p>Now I want this div to be displayed as like popup, so that it won't distract other contents of the page. </p>
  
  <p>Following is a code of my search box section in HTML:</p>
  
  <pre><code>        &lt;!--start SearchBox section--&gt;
          &lt;section id="searchbox"style="background:white"&gt;
              &lt;div class="container" style="margin-top:0px;"&gt;
  
  
                &lt;div class="row"&gt;
  
                      &lt;div class="col-lg-12"&gt;
  
  
                 &lt;form style=""&gt;
                      &lt;center&gt;
                              &lt;div id="SearchBoxBorder" style="background:white;border:2px solid #a1a1a1;border-radius:5px;margin-top:20px;width:800px;"&gt;
                              &lt;table id="mytable" &gt;
                                      &lt;td style="width:300px;background:white;"&gt;
                                         &lt;center&gt; &lt;div class="form-group"&gt;
                                                  &lt;input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
                                                      style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
                                                      border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;"&gt;
                                          &lt;/div&gt;&lt;/center&gt;
                                       &lt;/td&gt;
  
                                       &lt;td style="width:50px ;text-align:right;background:white;"&gt; &lt;center&gt;&lt;strong&gt; in&lt;/strong&gt;&lt;/center&gt;    &lt;/td&gt;
  
                                       &lt;td style="width:400px;background:white;"&gt;
                                       &lt;center&gt;
                                               &lt;div class="input-group"&gt;
                                                     &lt;input type="text" class="form-control" placeholder="in locality"
                                                      style="border-width:5px;background:white; margin-top:0px; margin-left:10px; margin-right:20px;width:;font-size:18px;
                                                      border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px;"&gt;
                                                     &lt;div class="input-group-btn"&gt;
                                                              &lt;button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown" id="dropdownBtn" 
                                                               style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
                                                               border-color:#a1a1a1;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;"&gt;Select&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
  
                                                               &lt;!--City dropdown --&gt;
                                                                      &lt;div class="SearchCities"&gt;
                                                                              &lt;div id="outer" style=""&gt;
  
  
  
                                                                                          &lt;div id="innerLeft" style=""&gt;
                                                                                              &lt;h5 &gt;North India:&lt;/h5&gt;
                                                                                              &lt;ul class="city" type="none";&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Delhi&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Agra&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Shrinagar&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Noida&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Himachal&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Patna&lt;/a&gt;&lt;/li&gt;
                                                                                              &lt;/ul&gt;
  
                                                                                          &lt;/div&gt;
  
                                                                                          &lt;div id="innerRight" style=""&gt;
                                                                                              &lt;a class="close"&gt;&amp;times;&lt;/a&gt;
                                                                                              &lt;h5&gt;West India:&lt;/h5&gt;
                                                                                              &lt;ul class="city" type="none";&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Mumbai&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Pune&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Nashik&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Kolhapur&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Osmanabad&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Ahamdabad&lt;/a&gt;&lt;/li&gt;
                                                                                              &lt;/ul&gt;
                                                                                          &lt;/div&gt;
  
  
                                                                              &lt;/div&gt;&lt;!--/outer--&gt;
                                                                          &lt;/div&gt;&lt;!--/SearchCities--&gt;
  
  
                                                               &lt;/div&gt;&lt;!-- /btn-group --&gt;
                                                     &lt;button type="button" class="btn btn-primary" style="margin-right:20px;"&gt;&lt;i class="icon-search" style="font-size:20px"&gt;&lt;/i&gt;  Search&lt;/button&gt;
                                               &lt;/div&gt;&lt;!-- /input-group --&gt;
                                             &lt;/center&gt;         
                                       &lt;/td&gt;
  
                              &lt;/table&gt;
                          &lt;/center&gt;
                      &lt;/form&gt;
  
      &lt;/div&gt;&lt;!--/col-lg-12--&gt;
  &lt;/div&gt;&lt;!--/row--&gt;
      &lt;/div&gt;&lt;!--/end of container--&gt;
  &lt;/section&gt;
  &lt;!--End of SearchBox section--&gt;
  </code></pre>
  
  <p>and following is my jQuery code:</p>
  
  <pre><code>$(document).ready(function(){
    $(".SearchCities").hide();
    $("#dropdownBtn").click(function(){
    $(".SearchCities").slideToggle();
    });
  });
  </code></pre>
  
  <p>For more idea what I want to do visit :<a href="http://www.askme.com/" rel="nofollow noreferrer">askme.com</a> and see a search box at the top and click on rest of India.
  So please can you help me to achieve this?
  Thank you in advance. </p>