第二个内联Javascript弹出窗口无法正常运行

Question

我遇到了问题。我想在网页上有两个内联javascript弹出窗口。这是javascript：

<script type="text/javascript">
    var popup;
    Sys.require(Sys.components.popup, function () {
        popup = Sys.create.popup("#popup", {
            parentElementID: "target"
        });
    });
    var popup2;
    Sys.require(Sys.components.popup, function () {
        popup2 = Sys.create.popup("#popup2", {
            parentElementID: "target"
        });
    });
</script>

以下是该页面的内容：

content
<span id="target" style="position: absolute; top: 50%; left: 40%; margin-top: -125px; margin-left: -200px;"></span>
<div id="popup" style="background: #ff6a00; color: #000; padding: 15px; margin: 0px">
    Popup #1
</div>
<div id="popup2" style="background: #ffd800; color: #000; padding: 15px; margin: 0px">
    Popup #2
</div>
content
<script>Sys.onReady(function () { popup.show(); })</script>
<script>Sys.onReady(function () { popup2.show(); })</script>

两个弹出窗口都定位在页面上的相同位置。所以我希望第二个与第一个重叠。第一个弹出窗口正确弹出。第二个实际上出现在页面中，它根本没有弹出。正如您所看到的，页面上的内容是围绕它的：

为什么会发生这种情况，我该如何解决？