我是jQuery的新手.我正在尝试在我的项目中创建搜索框功能.我创建了一个包含城市名称的div,我希望它可以在按钮的点击事件上显示.我可以使用jQuery的slideToggle()方法隐藏并显示该div的按钮的点击事件.
但是当显示div时,我的页面的其他内容会分心.我不期望这种行为.
但是当显示div时,我的页面的其他内容会分心.我不期望这种行为.
这是我显示该div之前的形象：
现在我想要将这个div显示为弹出窗口,这样它不会分散页面的其他内容.
<!--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,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">×</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();
});
});
解决方法
你基本上有三种方式：
>手工：使弹出的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).
