close button for jquery popup box - javascript

I am using this code for popup box and it's work well
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my HTML code:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
</div>
<div id="fade"></div>
but my popup box close only when click outside popup box but i want add a close button in my box and when click it close my box. how can do it?

Try this..
HTML:
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<h2>Content Demo 1</h2>
<p>Check out WebDesignersDesk for more tutorials</p>
</div>
<div class="closepopup">Close</div>
</div>
<div id="fade" class="fade"></div>
Javascript:
$('.closepopup').on('click', function(e) {
$('.popupbox').fadeOut();
$('.fade').fadeOut();
});

Related

Clear part of div

This pop-up-category has height 0. When button is pressed, i am adding height 100%. Inside have pop-up-wrap-category div where my data is stored.
Also have div for user controls ( Close pop-up).
<div class="pop-up-category">
<div class="pop-up-wrap-category">
<p>clear just this content</p>
//this this should be still visible(populated)
<div class="user-controls">
<span class="close-popup btn btn-danger">Close</span>
</div>
</div>
</div>
js :
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category').empty();
});
How to clear content from pop-up-wrap-category but users controls still stay visible ?
Find the p and clear p
$(document).on("click", ".close-popup", function () {
// console.log("sdasd");
$('.pop-up-wrap-category > p').empty(); //use .remove() if you want to get the p tag deleted from DOM
});

Hide show div, starting in Show mode

I'm using a show/hide javascript code.
You can find an example here http://ledonnedelre.com/test.htm
Basically if you click the ? on the top left, an help box appears. And after you can close it clicking again the button.
What i need is to have the help box already opened when you open the page.
I guess i should change something in this code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('?');
}else{
//change the button label to be 'Hide'
toggle_switch.html('NASCONDI');
}
});
});
});
</script>
It's a CSS issue. Set
display: block;
on the hidden element.

if same class, fadeIn / fadout

I have a setup here in jsFiddle: http://jsfiddle.net/2PmnQ/
I'm trying to make a function that will check if the modal has the same class as the button so the button will bring up the modal with the same class. I'm obviously trying to do this dynamically all within one function rather than doing a if statement for every class.
var p = $(".popUp");
var position = p.position();
var tagLength = $("p a").width();
$( ".modal" ).css({left: (position.left + tagLength + 10) + "px", top: position.top + "px"});
$( ".popUp").hover(
function() {
$( ".modal" ).stop().fadeIn();
}, function() {
$( ".modal" ).stop().fadeOut();
}
);
I would use a custom data attribute instead of a class to save the target class:
<p class="popUp" data-modal="one"><a>popUp one here</a></p>
<p class="popUp" data-modal="two"><a>popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
That way you don't have to filter the target out of the trigger element classes and only need this in your hover function:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal')).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/1/
V2 using jQuery UI position() plugin:
<!-- i switched the popup classes to the `a` here so it works in the fiddle -->
<p><a class="popUp" data-modal="one">popUp one here</a></p>
<p><a class="popUp" data-modal="two">popUp two here</a></p>
<div class="modal one">PopUp one should be here</div>
<div class="modal two">PopUp two should be here</div>
JS:
$('.popUp').hover(function(){
$('.modal.'+$(this).data('modal'))
// reset positions otherwise it doesn't work correctly after the first time. don't know why :(
// looks like this problem: http://forum.jquery.com/topic/position-keeps-adding-original-left-and-top-to-current-values-in-ie-8
.css({'left':0,'top':0})
// position modal 10px to the right of the popup link
.position({'my':'left+10 center',
'at' : 'right center',
'of' : $(this)
}
).fadeIn();
},function(){
$('.modal.'+$(this).data('modal')).fadeOut();
});
http://jsfiddle.net/2PmnQ/10/
(Be sure to include the jQuery UI with at least the position plugin: http://jqueryui.com/download/#!version=1.11.0&components=0001000000000000000000000000000000000. Yeah maybe it's a bit overkill for this but it's really convenient)

Load a new div into exiting div with load more button

I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition

Many toggle-slide elements in one page

I use this script multiple times to hide some text:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
I want to make it impossible to toggle two hidden divs at once.
Example:
Click on one button (#button1) = the hidden div (#div1) associated to that button shows.
Click another button (#button2) = The div (#div2) associated to that button shows and at the same time #div1 closes (slide to close).
Click another button (#button3) = The div (#div3) associated to that button shows and at the same time #div2 closes (slide to close).
Add a class .button to all of the buttons and .div to all divs. Then it's just a matter of:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
http://jsfiddle.net/6Lhxm/
Could also hide all the divs on click and then show only the associated one:
javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
html:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>
http://jsfiddle.net/x7Ehq/

Categories