Develop Reference

How to close the window by clicking on a specific range through javascript or jquery?

I want to ask that I made a pop-up window. I want to click the gray part after the pop-up window to close the entire popup, but click the yellow block to close the popup. But I am a novice in programming and don’t know how to write this to achieve it. I hope it can be done. Get everyone's help, thank you!
$('.js-btn').on('click',function(e){
$('.popup').css('display','flex');
})
.popup {
position: fixed;
width: 100%;
height: 100vh;
top: 0px;
right: 0px;
left: 0px;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
z-index: 999;
display: none;
}
.popup .wrap {
display: inline-block;
width: 300px;
height: 300px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="js-btn">click</button>
<div class="popup">
<div class="wrap">content</div>
</div>

Firstly, make a global variable named isPopupOpen. While opening the popup, you can set isPopupOpen to true.
Then you can try the bellow code:
$("body").on("click", function(e) {
if (isPopupOpen) {
// your code
isPopupOpen = false;
}
});

Problem hiding a click-triggered div when anywhere on the page is clicked while still keeping everything selectable

Say a menu is triggered when a button is clicked, now
1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),
2_ Everything else on the page must still remain selectable throughout this process.
Here's what I've tried:
$(".dad").click(function() {
$(".son").show();
$(".mask").show();
});
$(".mask").click(function() {
$(".son").hide();
$(".mask").hide();
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>
This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.
Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.

Hope it helpful...
$(".dad").click(function() {
$(".son").show();
});
$(document).click(function (e) {
var container = $(".dad");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
$(".son").hide();
}
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>

Swapping and changing out div content and replacing with other div content [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
At the click of one of the links on my side bar menu, how can I dynamically swap out existing div content with other its corresponding div and load it back into the #content div? I am jQuery friendly. Here is the HTML markup:
#container {
bottom: 0;
left: 0;
top: 0;
right: 0;
margin: auto;
position: absolute;
width: 900px;
height: 600px;
}
#list {
list-style-type: none;
padding: 0;
margin: 0;
}
#list li {
margin:0 0 10px 0;
background: grey;
padding: 3px;
cursor: pointer;
}
.item {
width: 100%;
height: 100%;
background: rgb(192,192,192);
}
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
height: 100%;
}
#content {
float: left;
width: 75%;
background-color: rgb(192,192,192);
height: 100%;
}
<div id="container">
<div id="menu">
<ul id="list">
<li>Coffee</li>
<li>Tea</li>
<li>Ice Cream</li>
</ul>
</div>
<div id="content">
<div id="item1">Things about coffee...</div>
<div id="item2">Things about tea...</div>
<div id="item3">Things about ice cream...</div>
</div>
</div>

$("...").click(function(){
var div = $("#div1").html();
$("#div1").html($("#div2").html());
$("#div2").html(div);
});

Use hidden divs for the different content. display: none; initially and $('.classofhidden').show(); / $('.classofvisible').hide();
$('.content2').show();
div[class^='content'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="content1">1</div>
<div class="content2">2</div>
<div class="content3">3</div>

If this is indicative of the amount of content you have, then I wouldn't worry about "moving" things into the content div. I would just toggle the visibility of the various items, making only one visible at a time.
If the item divs have a class, like 'my-item' to help select them and a hidden class to hide them, ( <div id="item1" class="hidden my-item">Something about coffee...</div> )
And if the list items have a data attribute that selects the matching item: (<li data-show="#item1">Coffee</li>)
then this should work:
$(document).ready(function(){
//register this event handler on every li
$("li").click(function(){
var $li = $(this);
var show_selector = $li.data("show"); // => "#item1"
$(".my-item").addClass("hidden"); //hide all
$(show_selector).removeClass("hidden"); //but show matching item
});
});
Where .hidden{ display:none; }

Change 'Click' function to mouseover/mouseout

I am using the following sliding div script:
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
Currently, the slidetoggle function is activated when the .btn-slide button is clicked. This slides up the "panel" div.
Upon clicking the .btn-slide button a second time, the panel div is closed.
I am a complete newb at js, so any assistance would be appreciated. Here's what I am trying to do:
1) When the mouse moves over (as opposed to clicking) the .btn-slide class, i would like the panel to slide out.
2) Then, when the mouse moves out of either the .btn-slide or #panel, i would like the panel to close. (but if the mouse is over either one, the panel should stay open).
I was able to get it working to where the slidetoggle function would close either one, or the other, but not both.
Thank you in advance for the help.
Sincerely,
Mac
Here is the JS:
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>
I have played with the CSS to fit my particular web site and is as follows (the original js, html, css can be obtained from the link above).
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}

When you move away from the .btn-slide to the #panel it hides it now because it triggers the mouseleave event of the .btn-slide.
To prevent this you should do something like:
HTML:
<div id="trigger">
Slide down
<div id="panel">
Content of your panel
</div>
</div>
JQuery:
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});
Make sure in your CSS you then set the panel to be hidden from start...
div#panel {
display: none;
}

Iframe and overlayed button problem

I am using an iframe now i want to have a button inside the iframe on top right which will display only on mouse over. How can i add this button? Can anyone please help me into the right direction.

jQuery
$(function() {
var close = $('#close');
$('#frame').hover(function() {
close.show();
}, function() {
close.hide();
});
});
HTML
<div id="frame">
<iframe src="http://example.com"></iframe>
<div id="close">Close</div>
</div>
CSS
#frame {
width: 400px;
height: 300px;
position: relative;
}
#frame iframe {
width: 100%;
height: 100%;
}
#close {
display: none;
position: absolute;
top: 0;
right: 0;
border: 1px solid red;
background: #fff;
padding: 5px;
}
jsFiddle.
Keep in mind this obscures a portion of the iframe. It would be a better idea to not do this.