jQuery 如何使div隐藏和显示为弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19333863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div hide and show as like popup window?
提问by sachin_ware
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.
我是 jQuery 的新手。我正在尝试在我的项目中创建搜索框功能。我创建了一个包含城市名称的 div，我希望它显示在按钮的点击事件上。我能够在slideToggle()按钮的单击事件上使用jQuery 方法隐藏和显示该 div 。但是当显示 div 时，我页面的其他内容就会分心。我不希望这种行为。
Here is my image before displaying that div:
这是我在显示该 div 之前的图像：
and the following is an image of the page after div is displayed:
下面是显示div后的页面图片：
Now I want this div to be displayed as like popup, so that it won't distract other contents of the page.
现在我希望这个 div 像弹出窗口一样显示，这样它就不会分散页面的其他内容。
Following is a code of my search box section in HTML:
以下是我在 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">×</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:
以下是我的 jQuery 代码：
$(document).ready(function(){
$(".SearchCities").hide();
$("#dropdownBtn").click(function(){
$(".SearchCities").slideToggle();
});
});
For more idea what I want to do visit :askme.comand 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.
有关我想要做什么的更多想法，请访问：askme.com并在顶部看到一个搜索框，然后单击印度其他地区。所以请你能帮我实现这一目标吗？先感谢您。
回答by fbbdev
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 popupAPI 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).
手动：使弹出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 popupAPI参考：http: //api.jqueryui.com/dialog/
示例：http: //jqueryui.com/dialog/
插件下载：http: //jqueryui.com/download/
使用 Bootstrap 的下拉组件：从您的代码看来，您正在使用 bootstrap。您可以轻松使用引导程序下拉菜单或模式。
Bootstrap modals 是弹出式对话框，就像 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)。
回答by Dinesh Kanivu
Here you can do this easily
在这里您可以轻松做到这一点
HTML
HTML
<div class="dialogbox"> This is Dialogue box</div>
<a id="click">click here</a>
CSS
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>
回答by nrsharma
You can do it easily with a jQuery UI dialog.
您可以使用 jQuery UI 对话框轻松完成。
HTML:
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:
JavaScript/jQuery：
$(function() {
$( "#dialog" ).dialog();
});
More information can be found here.
可以在此处找到更多信息。
