Reputation:
div popup with jquery
i have totaly 4 div tag. for each i have added a class attribute as item in that i have about 2 span tag for each and every div.. i need to get a pop on clicking.. in that pop i need to get the message in which div i have clicked
Url : http://jsfiddle.net/varunms/a9tZx/
Eg :
<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>
If i click on a div which has This is post 2 i need to get the pop with that message
Upvotes: 2
Views: 17506
Answers (4)
Reputation: 9090
Here, i have done complete bins for above query. you can check demo link as shown below:
Demo: 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();
});
});
Demo: http://codebins.com/bin/4ldqp8s
Upvotes: 2
Reputation: 2069
You need to add click event listener to item class:
$('.item').on('click', function() {
});
When this click happens, you need to find the element with class postname in the context of clicked element:
$('.postname', this).text();
Then to create a pop up dialog, create a new div (or use the postname one if you want) and set necessary text and call dialog creation function.
$('<div>').text($('.postname', this).text()).dialog();
Here is full sample (of all this together): http://jsfiddle.net/a9tZx/7/
jQuery UI css files don't seem to work on fiddle now, so you need to add the necessary files to your project to make this look pretty.
Upvotes: 0
Reputation: 12018
You'll want something like this:
$('.item').click(function() {
var message = $('.postname', $(this)).html();
alert(message);
});
See the forked fiddle for a demo.
UPDATE: I have updated the fiddle to use jQuery UI dialog. You'll need to add the correct stylesheets for jQuery-UI to your code.
Upvotes: 0
Reputation: 6020
Use jQuery.dialog() in the jQuery UI library:
$(".item").each(function() {
$(this).bind("click", function() {
$(this).dialog({
modal: true
});
});
});
Quick demo: jsfiddle demo
Upvotes: 5