div popup avec jquery

j'ai totalement 4 balise div. pour chacun, j'ai ajouté un attribut de classe comme élément de ce que j'ai sur les 2 balises span et pour chacune des div.. j'ai besoin d'une fenêtre en cliquant sur.. en ce que la pop j'ai besoin de faire passer le message dans lequel div que j'ai cliqué sur

Url : http://jsfiddle.net/varunms/a9tZx/

Par exemple :

<div class="item">
    <span class="postname"> This is 1 post </span>
    <span class="decs" >1</span>
</div>

<div class="item">
    <span class="postname"> This is 2 post </span>
    <span class="decs" >2</span>
</div>

Si je clique sur un div qui a Ce post 2 j'ai besoin d'obtenir de la pop avec ce message

oui j'ai essayé mais je n'ai pas téléchargé, j'ai essayé en localhost

OriginalL'auteur | 2012-08-06

  1. 5

    Utilisation jQuery.la boîte de dialogue() dans la bibliothèque jQuery UI:

    $(".item").each(function() {
    $(this).bind("click", function() {
        $(this).dialog({
            modal: true
        });
    });
});​​​​​​​​​​​​​​​​​​​

    Démonstration rapide: jsfiddle démo

    pouvez-vous me montrer une démo svp
    Démo ajouté, mais vous êtes mieux l'adapter à vos besoins avec la documentation: jqueryui.com/demos/dialog

    OriginalL'auteur Paul Aldred-Bann

  2. 2

    Ici, j'ai fait remplir des bacs pour la requête ci-dessus. vous pouvez vérifier le lien de démonstration comme indiqué ci-dessous:

    Démo: http://codebins.com/bin/4ldqp8s

    HTML

    <div id="panel">
<div class="item">
<div id="popupnow" style="display:none;background-color:white;width:auto">
<span class="postname">
This is 1 post 
</span>
<span class="decs" >
1
</span>
</div>
<span class="postname">
This is 1 post 
</span>
<span class="decs" >
1
</span>
</div>
<div class="item">
<div id="popupnow" style="display:none;background-color:white;width:auto">
<span class="postname">
This is 2 post 
</span>
<span class="decs" >
2
</span>
</div>
<span class="postname">
This is 2 post 
</span>
<span class="decs" >
2
</span>
</div>
<div class="item">
<div id="popupnow" style="display:none;background-color:white;width:auto">
<span class="postname">
This is 3 post 
</span>
<span class="decs" >
3
</span>
</div>
<span class="postname">
This is 3 post 
</span>
<span class="decs" >
3
</span>
</div>
<div class="item">
<div id="popupnow" style="display:none;background-color:white;width:auto">
<span class="postname">
This is 4 post 
</span>
<span class="decs" >
4
</span>
</div>
<span class="postname">
This is 4 post 
</span>
<span class="decs" >
4
</span>
</div>
<div class="item">
<span class="postname">
This is 5 post 
</span>
<span class="decs" >
5
</span>
</div>
<!-- Dialog Box -->
<div id="boxes">
<div id="dialog" class="window">
<div id="title">
My Dialogue
</div>
<div id="msg">
</div>
<a href="#"class="close"/>
Close it
</a>
</div>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask">
</div>

    CSS:

    #mask{
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
opacity:0.5;
display:none;
}
a{
color:#333;
text-decoration:none
}
a:hover{
color:#ccc;
text-decoration:none
}
#boxes #dialog{
padding:0px;
width:375px;
height:100px;
padding:10px;
bordercolor:1px solid #445cd88;
background-color:#44bb55;
display:none;
position:absolute;
z-index:99999;
border-radius: 1.2em;
-moz-box-shadow:    5px 5px 2px 2px #44fc65;
-webkit-box-shadow: 5px 5px 2px 2px #44fc65;
box-shadow:         5px 5px 2px 2px #44fc65;
}
#dialog #title{
background:#f8a233;
bordercolor:1px solid #445cd88;
border-radius: 1.5em;
margin:0px;
padding:5px;
}
#dialog #msg{
margin-left:20px;
padding:5px;
font-size:14px;
}
#dialog .close{
display:block;
float:right;
background:#afa1f5;
bordercolor:1px solid #445cd88;
border-radius: 1.2em;
width:100px;
text-align:center;
font-size:13px;
}
#dialog .close:hover{
background:#af55d9;
bordercolor:1px solid #445cd88;
}
.item {
background:#0088CC;
color:#fff;
margin: 10px;
border:1px solid #3355a9;
border-radius: 1.2em;
padding:10px;
-moz-box-shadow:    5px 5px 2px 2px #999;
-webkit-box-shadow: 5px 5px 2px 2px #999;
box-shadow:         5px 5px 2px 2px #999;
text-shadow:0 1px 1px #194B7E;
}
div.item:hover {
cursor:pointer;
-moz-box-shadow:    inset 3px 9px 32px #afdaf0;
-webkit-box-shadow:inset 3px 9px 32px #afdaf0;
box-shadow:         inset 3px 9px 32px #afdaf0;
}
div.item:hover .postname,div.item:hover .decs{
text-decoration:underline;
}

    JQuery:

    $(function() {
$(".item").click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get Dialog Object
var $dialog = $("#dialog");
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({
'width': maskWidth,
'height': maskHeight
});
//transition effect     
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$dialog.css('top', winH / 2 - $dialog.height() / 2);
$dialog.css('left', winW / 2 - $dialog.width() / 2);
//Set Message
var MSG = $(this).find(".postname").text().trim() + " " + $(this).find(".decs").text().trim()
$dialog.find("#msg").html(MSG);
//transition effect
$dialog.fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});

    Démo: http://codebins.com/bin/4ldqp8s

    salut je vous remercie sir son travaille aussi pour moi de toute façon j'ai mélangé à votre code avec S Varun code merci encore une fois

    OriginalL'auteur gaurang171

  3. 0

    Vous voudrez quelque chose comme ceci:

    $('.item').click(function() {
var message = $('.postname', $(this)).html();
alert(message);
});

    Voir le fourche violon pour une démo.

    Mise à JOUR: j'ai mis à jour le violon à l'utilisation de jQuery UI dialog. Vous aurez besoin d'ajouter le bon de feuilles de style pour jQuery UI pour votre code.

    oui j'en ai besoin comme jquery popup
    j'ai besoin d'elle comme un pop de l'interface utilisateur
    À l'aide de jQuery UI dialog() va vous permettre d'avoir une fenêtre, une boîte de dialogue modale, etc.
    désolé de ne pas travailler dans mon script
    je vais envoyer u via fiddle3

    OriginalL'auteur davidethell

  4. 0

    Vous devez ajouter un écouteur d'événement clic de classe item:

    $('.item').on('click', function() {
});

    Lorsque cliquez sur ce qui se passe, vous avez besoin de trouver l'élément avec la classe postname dans le contexte de l'élément cliqué:

    $('.postname', this).text();

    Puis de créer un pop-up boîte de dialogue créer un nouveau div (ou utilisez le postname si vous le souhaitez) et nécessaire de texte et d'appeler la boîte de dialogue création de la fonction.

    $('<div>').text($('.postname', this).text()).dialog();

    Ici est complète de l'échantillon (de l'ensemble):
    http://jsfiddle.net/a9tZx/7/

    jQuery UI css fichiers ne semblent pas fonctionner sur le violon maintenant, vous devez ajouter les fichiers nécessaires à votre projet pour le rendre joli.

    OriginalL'auteur enoyhs