How to make div hide and show as like popup window?

Question

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 slideToggle() 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.

Here is my image before displaying that div:

enter image description here

and the following is an image of the page after div is displayed:

enter image description here

Now I want this div to be displayed as like popup, so that it won't distract other contents of the page.

Following is a code of my search box section in HTML:

        <!--start SearchBox section-->
        <section id="searchbox"style="background:white">
            <div class="container" style="margin-top:0px;">


              <div class="row">

                    <div class="col-lg-12">


               <form style="">
                    <center>
                            <div id="SearchBoxBorder" style="background:white;border:2px solid #a1a1a1;border-radius:5px;margin-top:20px;width:800px;">
                            <table id="mytable" >
                                    <td style="width:300px;background:white;">
                                       <center> <div class="form-group">
                                                <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;">
                                        </div></center>
                                     </td>

                                     <td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center>    </td>

                                     <td style="width:400px;background:white;">
                                     <center>
                                             <div class="input-group">
                                                   <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;">
                                                   <div class="input-group-btn">
                                                            <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;">Select<span class="caret"></span></button>

                                                             <!--City dropdown -->
                                                                    <div class="SearchCities">
                                                                            <div id="outer" style="">



                                                                                        <div id="innerLeft" style="">
                                                                                            <h5 >North India:</h5>
                                                                                            <ul class="city" type="none";>
                                                                                                    <li><a>Delhi</a></li>
                                                                                                    <li><a>Agra</a></li>
                                                                                                    <li><a>Shrinagar</a></li>
                                                                                                    <li><a>Noida</a></li>
                                                                                                    <li><a>Himachal</a></li>
                                                                                                    <li><a>Patna</a></li>
                                                                                            </ul>

                                                                                        </div>

                                                                                        <div id="innerRight" style="">
                                                                                            <a class="close">&times;</a>
                                                                                            <h5>West India:</h5>
                                                                                            <ul class="city" type="none";>
                                                                                                    <li><a>Mumbai</a></li>
                                                                                                    <li><a>Pune</a></li>
                                                                                                    <li><a>Nashik</a></li>
                                                                                                    <li><a>Kolhapur</a></li>
                                                                                                    <li><a>Osmanabad</a></li>
                                                                                                    <li><a>Ahamdabad</a></li>
                                                                                            </ul>
                                                                                        </div>


                                                                            </div><!--/outer-->
                                                                        </div><!--/SearchCities-->


                                                             </div><!-- /btn-group -->
                                                   <button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i>  Search</button>
                                             </div><!-- /input-group -->
                                           </center>         
                                     </td>

                            </table>
                        </center>
                    </form>

    </div><!--/col-lg-12-->
</div><!--/row-->
    </div><!--/end of container-->
</section>
<!--End of SearchBox section-->

and following is my jQuery code:

$(document).ready(function(){
  $(".SearchCities").hide();
  $("#dropdownBtn").click(function(){
  $(".SearchCities").slideToggle();
  });
});

For more idea what I want to do visit :askme.com 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.

Please **please** don't use inline styles. To solve your problem, try `position: absolute` on your menu — Bojangles, Oct 12 '13 at 11:57

fbbdev · Answer 1 · 2013-10-12T13:28:29.377

You basically have three ways:

By hand: make the popup div floating and position it absolutely, then set top to 100% (this will make it look like a popup menu. Make sure the parent element has relative positioning.

HTML:
```
<div class="input-group" style="position: relative;">
  <div class="SearchCities">
    ...
  </div>
</div>
```
CSS:
```
.SearchCities {
  float: right;
  position: absolute;
  top: 100%;
}
```
JS: No change required
Use jQueryUI's dialog plugin: as pointed out in nrsharma's answer you can use a jQuery plugin to make it look like a popup dialog.
```
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin
$('.SearchCities').dialog("open"); // Open popup
```
API Reference: http://api.jqueryui.com/dialog/

Examples: http://jqueryui.com/dialog/

Plugin download: http://jqueryui.com/download/
Use Bootstrap's dropdown component: it seems from your code that you're using bootstrap. You can easily use bootstrap dropdowns or modals.

Bootstrap modals are popup dialogs just like jQueryUI's dialog plugin, but they look better and they're much more customizable. Have a look there for an example: http://getbootstrap.com/javascript/#modals

Bootstrap dropdowns are simple dropdown menus, but with a bit of hacking you can put anything inside them.

All you need is a bit of HTML (no JavaScript):
```
<div class="input-group dropdown">
  <button type="button" class="btn btn-default dropdown-toggle"
    data-toggle="dropdown" id="dropdownBtn" role="button">...</button>
  <div class="dropdown-menu SearchCities" role="menu">
    ...
  </div>
</div>
```
To make this work you also need to include Bootstrap js plugins (bootstrap.js/bootstrap.min.js).

Reference: http://getbootstrap.com/javascript/#dropdowns

Yes, but you can strip it of useless features by choosing what you need before downloading bootstrap. See http://stackoverflow.com/questions/17088160/using-just-bootstrap-modal — fbbdev, May 22 '15 at 21:16

score 5 · Answer 2 · answered Oct 12 '13 at 12:29

5

Here you can do this easily

HTML

<div class="dialogbox"> This is Dialogue box</div>
<a id="click">click here</a>

CSS

.dialogbox{width:100px; height:100px; background:grey;display:none}

JQUERY

<script src="latest jquery library"></script>

    <script>

    $(document).ready(function(){
    $("#click").click(function(){

    $(".dialogbox").toggle();

    });

    });
   </script>

answered Oct 12 '13 at 12:29

Dinesh Kanivu

2,551
1
23
55

yes we can use this dialog ,but can we put links in it,Or only text is allowed to put in it. – sachin_ware Oct 12 '13 at 13:29
@user2681213 You can put text as well as link – Dinesh Kanivu Oct 12 '13 at 13:31
can you put buttons and use javascript on them to change the content? – Mihai Bratulescu Jan 28 '15 at 10:56
@MihaiBratulescu Sure We Can – Dinesh Kanivu Jan 28 '15 at 11:17

score 3 · Answer 3 · edited Apr 02 '14 at 19:31

3

You can do it easily with a jQuery UI dialog.

HTML:

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The
     dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

JavaScript/jQuery:

$(function() {
    $( "#dialog" ).dialog();
});

More information can be found here.

edited Apr 02 '14 at 19:31

Chris Forrence

10,042
11
48
64

answered Oct 12 '13 at 11:59

nrsharma

2,532
3
20
36

How to make div hide and show as like popup window?

3 Answers3