jQWidgets jqxWindow modalOpacity 属性

当我们在Web应用程序中使用jQWidgets jqxWindow组件时，modalOpacity属性会影响模态对话框背景的透明度。这个属性可以设置为0.0到1.0的数字，其中0表示完全透明，1表示完全不透明。在这里，我会详细讲解如何使用jQWidgets jqxWindow的modalOpacity属性。

语法

$('#jqxwindow').jqxWindow({
    modalOpacity: [value]
});

参数

value：设置模态对话框背景的透明度，可以设置为0.0到1.0之间的数字。

示例1

在下面的示例中，我将显示如何将模态窗口的modalOpacity属性设置为0.5，并将模态对话框包含在<div id="content">标记中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxWindow modalOpacity属性示例1</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#window').jqxWindow({
                height: 200, width: 300,
                resizable: false,
                draggable: false,
                modalOpacity: 0.5
            });
        });
    </script>
</head>
<body>
    <div id="content" style="display: none;">
        <div id="window">Hello World</div>
    </div>
    <input type="button" value="打开该窗口" id="openButton"/>
</body>
</html>

在上面的示例中，我将modalOpacity设置为0.5。设置该属性后，打开模态对话框时，背景会变成半透明状态。

示例2

在这个示例中，我将显示如何将模态窗口的modalOpacity属性设置为透明，并将模态对话框包含在<div id="content">标记中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQWidgets jqxWindow modalOpacity属性示例2</title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#window').jqxWindow({
                height: 200, width: 300,
                resizable: false,
                draggable: false,
                modalOpacity: 0.0
            });
        });
    </script>
</head>
<body>
    <div id="content" style="display: none;">
        <div id="window">Hello World</div>
    </div>
    <input type="button" value="打开该窗口" id="openButton"/>
</body>
</html>

在上面的示例中，我将modalOpacity设置为0.0。设置该属性后，打开模态对话框时，背景将完全透明。

希望这个攻略可以完整地解释jQWidgets jqxWindow的modalOpacity属性以及如何在Web应用程序中使用它。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxWindow modalOpacity 属性 - Python技术站

jQWidgets jqxWindow modalOpacity 属性

语法

参数

示例1

示例2

相关文章