[英]How to get a popup box to appear when you click on a div?
I´m trying to make a popup box appear when I click on a div box. 我试图在单击div框时显示一个弹出框。 I´m haven´t done a lot of js or jquery, so I have a hard time figuring out how to do it. 我还没有做很多js或jquery,所以我很难弄清楚该怎么做。 I got a box (class="box")
that take up most of the screen and then a couple of boxes inside the first box. 我得到一个占据屏幕大部分空间的盒子(class="box")
,然后在第一个盒子中放了几个盒子。 So when the second box is clicked (class="profile1")
I want an popup box to appear.I later going to insert a picture were it sayes class="picture"
, would be nice if that was clickable as well 因此,当单击第二个框(class="profile1")
我希望出现一个弹出框。我稍后将插入图片,说class="picture"
,如果它也是可单击的,那会很好
<div class="box">
<div class="profile1">
<div class="picture"></div>
<p class="name">NAME</p>
</div>
</div>
css CSS
.box {
left: 19.5%;
top: 11.5%;
height:85%;
right:2.2%;
background-color: #F2F2F2;
border-radius: 5px;
position: absolute;
border: 1px soid F2F2F2(0, 0, 0, 0.3);
z-index:-1;
overflow: auto;
}
.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
Any suggestions on how to do it? 有什么建议吗? Appreciate all help 感谢所有帮助
You can use jQuery UI like this: 您可以像这样使用jQuery UI:
JS: JS:
$(function(){
$('.profile1').on("click", function(e){
e.preventDefault()
$('.picture').dialog({
width: 600,
height: 'auto',
modal:true,
title: 'Picture',
overlay: { backgroundColor: "#000", opacity: 0.9 }
})
})
})
HTML: HTML:
<div class="box">
<div class="box"> <div class="profile1">
<p class="name">NAME</p>
</div>
<div class="picture">Photo Here...</div>
</div>
CSS for ".picture": “ .picture”的CSS:
.picture{
display:none;
width:30%;
height:30%;
}
And don't forget to include jQuery UI in addition to jQuery and the jQuery UI CSS: 并且不要忘记在jQuery和jQuery UI CSS之外还包括jQuery UI:
jQuery: <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery: <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery UI: <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
jQuery UI: <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
CSS: https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css
(you should download this CSS, not link to CDN) CSS: https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css
: https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css
(您应该下载此CSS,而不是链接到CDN)
JSFiddle: https://jsfiddle.net/91k8xa22/ JSFiddle: https ://jsfiddle.net/91k8xa22/
Tell me if I can improve it :) 告诉我是否可以改善它:)
https://jsfiddle.net/www139/x6q7Ls5g/ https://jsfiddle.net/www139/x6q7Ls5g/
window.addEventListener('load', function() { var profileBox = document.getElementsByClassName('profile1')[0]; var picture = document.getElementsByClassName('picture')[0]; profileBox.addEventListener('click', function() { document.getElementById('popupbox').style.display = 'block'; picture.innerHTML = '<img src="http://freetopwallpaper.com/wp-content/uploads/2013/09/beautiful-background-wallpaper-hd-3.jpg">'; }); });
.box { left: 19.5%; top: 11.5%; height: 85%; right: 2.2%; background-color: #F2F2F2; border-radius: 5px; position: absolute; border: 1px soid F2F2F2(0, 0, 0, 0.3); z-index: -1; overflow: auto; } .profile1 { margin-left: 1.7%; margin-top: 6%; height: 40%; width: 18%; background-color: #0D7BFF; position: absolute; z-index: -1; border-radius: 2px; } #popupbox { position: fixed; width: 50vw; height: 50vh; background-color: #eee; display: none; }
<div class="box"> <div class="profile1"> <div class="picture"></div> <p class="name">NAME</p> </div> </div> <!--popup box--> <div id="popupbox">This is the popup box</div> <!--end popup box-->
here is new one,
html :
<div class="box">
<div class="profile1">
<div class="picture"></div>
<p class="name">NAME</p>
</div>
</div>
<div class="popup">popup</div>
css :
.box {
left: 19.5%;
top: 11.5%;
height:85%;
right:2.2%;
background-color: #F2F2F2;
border-radius: 5px;
position: absolute;
border: 1px soid F2F2F2(0, 0, 0, 0.3);
z-index:-1;
overflow: auto;
}
.profile1 {
margin-left:1.7%;
margin-top:6%;
height:40%;
width:18%;
background-color:#0D7BFF;
position:absolute;
z-index:-1;
border-radius:2px;
}
.popup
{
display: none;
width: 40%;
height: 300px;
margin: 0 auto;
margin-top: 50px;
background: #eee;
border-radius: 8px;
box-shadow: 0 0 10px #999;
}
#close
{
float: right;
}
js :
$(".profile1").click(function(){
$(".popup").show();
})
$("#close").click(function(){
$(".popup").hide();
})
http://jsfiddle.net/erasad22/vjpsrtux/ http://jsfiddle.net/erasad22/vjpsrtux/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.