Comment faire div masquer et afficher comme une fenêtre popup?
Je suis nouveau sur jQuery. J'essaie de créer une fonctionnalité de zone de recherche dans mon projet. J'ai créé un div qui contient les noms des villes, et je veux qu'il soit affiché sur l'événement de clic d'un bouton. Je peux cacher et montrer ce div en utilisant la méthode slideToggle() de jQuery sur l'événement click d'un bouton. Mais lorsque div est affiché, les autres contenus de ma page sont distraits. Je ne m'attends pas à ce comportement.
Voici mon image avant d'afficher cette div:
et ce qui suit est une image de la page après l'affichage de div:
Maintenant, je veux que ce div soit affiché comme une popup, afin qu'il ne détourne pas l'attention des autres contenus de la page.
Voici un code de ma section de zone de recherche en 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-->
et voici mon code jQuery:
$(document).ready(function(){
$(".SearchCities").hide();
$("#dropdownBtn").click(function(){
$(".SearchCities").slideToggle();
});
});
Pour plus d'idées sur ce que je veux faire, visitez: askme.com et voyez une boîte de recherche en haut et cliquez sur le reste de l'Inde. Alors, pouvez-vous m'aider à y parvenir? Merci d'avance.
Vous avez essentiellement trois façons:
À la main: faites flottante la div popup et positionnez-la absolument, puis réglez à 100% (cela ressemblera à un menu popup. Assurez-vous l'élément parent a un positionnement relatif.
HTML:
<div class="input-group" style="position: relative;"> <div class="SearchCities"> ... </div> </div>CSS:
.SearchCities { float: right; position: absolute; top: 100%; }JS: aucun changement requis
Utilisez le plugin de dialogue de jQueryUI : comme indiqué dans la réponse de nrsharma, vous pouvez utiliser un plugin jQuery pour le faire ressembler à une boîte de dialogue popup.
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin $('.SearchCities').dialog("open"); // Open popupRéférence API: http://api.jqueryui.com/dialog/
Exemples: http://jqueryui.com/dialog/
Téléchargement du plugin: http://jqueryui.com/download/
Utilisez le menu déroulant de Bootstrap: il semble d'après votre code que vous utilisez bootstrap. Vous pouvez facilement utiliser bootstrap déroulants ou modaux.
Les modaux d'amorçage sont des boîtes de dialogue contextuelles tout comme le plug-in de boîte de dialogue de jQueryUI, mais ils sont plus beaux et ils sont beaucoup plus personnalisables. Jetez un œil là-bas pour un exemple: http://getbootstrap.com/javascript/#modals
Les listes déroulantes Bootstrap sont de simples menus déroulants, mais avec un peu de piratage, vous pouvez y mettre n'importe quoi.
Tout ce dont vous avez besoin est un peu de HTML (pas de 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>Pour que cela fonctionne, vous devez également inclure Bootstrap plugins js (bootstrap.js/bootstrap.min.js).
Ici, vous pouvez le faire facilement
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>
Vous pouvez le faire facilement avec une boîte de dialogue 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();
});
Plus d'informations peuvent être trouvées ici .