如何在html中制作弹出窗口

Question

我正在尝试在html制作一个弹出窗口，但我无法按照我的意图制作它。

我想要做的是：当我点击个人资料图片时会出现一个弹出窗口。

HTML

<span class="profile"><img scr="" ></span>
<div class="popupwindow">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signout"/>
    </div>
</div>

我需要使用jQuery吗？

Answer 1

没有jQuery：

<style>
.hidden {display:none}
</style>

<script>
function showpopup() {
    document.getElementById("popupwindow").classList.remove("hidden");
}
</script>

<span class="profile"><img src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></span>
<div id="popupwindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signout"/>
    </div>
</div>

使用jQuery：

<style>
.hidden {display:none}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
    $(".profile img").click(function() {
        $("#popupwindow").show();
    });
});    
</script>

<span class="profile"><img src="http://i.stack.imgur.com/o2hxa.png"></span>
<div id="popupwindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signout"/>
    </div>
</div>

使用jQuery UI：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" type="text/css">
<style>
.hidden {display:none}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>    
<script>
$(function() {
    $(".profile img").click(function() {
        $("#popupwindow").dialog({
            title: "My Popup Title",
            width: 600, 
            modal: true, 
            resizable: false
        });   
    });    
});
</script>

<span class="profile"><img src="http://i.stack.imgur.com/o2hxa.png"></span>
<div id="popupwindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signout"/>
    </div>
</div>