Question

我正在尝试在激活弹出窗口时更改页面背景颜色，而不是在模式关闭时将页面更改回其原始颜色。第一部分工作正常。当模式弹出窗口打开时，页面会更改颜色，但是当用户单击关闭按钮时，页面颜色会保持其当前状态。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://localhost:60980/Scripts/jquery-3.3.1.js"></script>
    <script src="http://localhost:60980/themes/jquery-ui.js"></script>
    <link href="http://localhost:60980/themes/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
                $("#menuclick").hover(function () {
                    $("#side-content").dialog({
                        width: 600,
                        height: 400,
                        title: "Quick Links Menu",
                        modal: true,
                        open: function (event, ui) {
                            $('body').css('background','rgba(0, 0, 0, 0.3)');
                            jQuery('.ui-dialog-titlebar-close').hide();
                        },
                        buttons: {
                            "Close": function () {
                                $('body').css('background','rgba(0, 0, 255)');
                                $(this).dialog("close");
                            }
                        },
                    });
                    return false;
                });
            })
    </script>
</head>
<body>
    <div id="menuclick">hover me
     <div id="side-content">      
     </div>
</div>
</body>
</html>

Answer 1

您的JavaScript可以在此HTML上正常工作

<div id="menuclick">hover me
     <div id="side-content">      
     </div>
</div>

所以也许它与您的HTML有关。

请参阅http://jsfiddle.net/9qkxj5mr/2/

Answer 2

好，我知道了问题所在。 Kamui的小提琴作品无法使脚本正常工作。我将背景更改为背景色，并且脚本运行正常。

jQuery Modal弹出更改页面背景颜色

2 个答案: