單擊div時如何顯示彈出框？

Question

我試圖在單擊div框時顯示一個彈出框。 我還沒有做很多js或jquery，所以我很難弄清楚該怎么做。 我得到一個占據屏幕大部分空間的盒子(class="box") ，然后在第一個盒子中放了幾個盒子。 因此，當單擊第二個框(class="profile1")我希望出現一個彈出框。我稍后將插入圖片，說class="picture" ，如果它也是可單擊的，那會很好

<div class="box"> 

    <div class="profile1"> 
        <div class="picture"></div>
        <p class="name">NAME</p>
    </div>

</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;
}

有什么建議嗎？ 感謝所有幫助

Answer 1

您可以像這樣使用jQuery UI：

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：

<div class="box"> 
 <div class="box"> <div class="profile1"> 
  <p class="name">NAME</p>
 </div>
 <div class="picture">Photo Here...</div>

</div>

“ .picture”的CSS：

.picture{
    display:none;
    width:30%;
    height:30%;
}

並且不要忘記在jQuery和jQuery UI CSS之外還包括jQuery UI：

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>

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/

Answer 2

告訴我是否可以改善它:)

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--> 

Answer 3

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/