Question

我是jQuery的新手。我正在尝试在我的项目中创建搜索框功能。我创建了一个包含城市名称的div，我希望它显示在按钮的click事件上。我能够在按钮的单击事件上使用jQuery的slideToggle()方法隐藏和显示div。但是当显示div时，我页面的其他内容会分散注意力。我不指望这种行为。

这是显示div之前的图像：

enter image description here

以下是显示div后的页面图像：

enter image description here

现在我希望这个div显示为弹出窗口，这样它就不会分散页面的其他内容。

以下是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-->

以下是我的jQuery代码：

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

如需了解我想要访问的内容，请访问：askme.com并在顶部看到一个搜索框，然后点击其余的印度。那么请你能帮助我实现这个目标吗？先感谢您。

Answer 1

你基本上有三种方式：

手动使弹出式div浮动并将其置于绝对位置，然后将顶部设置为100％（这将使其看起来像弹出菜单。确保父元素具有相对性定位。

HTML：
```
<div class="input-group" style="position: relative;">
  <div class="SearchCities">
    ...
  </div>
</div>
```
CSS：
```
.SearchCities {
  float: right;
  position: absolute;
  top: 100%;
}
```
JS：无需更改
使用jQueryUI的对话框插件：正如在nrsharma的回答中指出的那样，您可以使用jQuery插件使其看起来像一个弹出对话框。
```
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin
$('.SearchCities').dialog("open"); // Open popup
```
API参考：http://api.jqueryui.com/dialog/

示例：http://jqueryui.com/dialog/

插件下载：http://jqueryui.com/download/
使用Bootstrap的下拉组件：您的代码中似乎正在使用引导程序。您可以轻松使用自举下拉菜单或模态。

Bootstrap模式是弹出式对话框，就像jQueryUI的对话框插件一样，但它们看起来更好，而且它们更加可定制。看看那里的例子：http://getbootstrap.com/javascript/#modals

Bootstrap下拉菜单是简单的下拉菜单，但是如果有一些黑客行为，你可以在其中加入任何内容。

您只需要一点HTML（没有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>
```
要完成这项工作，您还需要包含Bootstrap js插件（bootstrap.js / bootstrap.min.js）。

参考：http://getbootstrap.com/javascript/#dropdowns

Answer 2

您可以在此轻松完成此操作

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>

Answer 3

您可以使用jQuery UI对话框轻松完成。

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();
});

可以找到更多信息here。

如何让div隐藏和显示像弹出窗口一样？

3 个答案: