Javascript jQuery滑块按钮通过数据选择器显示_Javascript_Jquery_Jquery Ui_Button_Datepicker

Javascript jQuery滑块按钮通过数据选择器显示

javascript jquery jquery-ui button

Javascript jQuery滑块按钮通过数据选择器显示,javascript,jquery,jquery-ui,button,datepicker,Javascript,Jquery,Jquery Ui,Button,Datepicker,我在表单上有一个jQuery日期选择器，它下面有一个jQuery滑块。当我选择日期选择器时，日历会弹出，但滑块上的按钮在日历顶部可见是否有办法确保日历位于表单上所有其他元素的顶部以下是页面源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My ASP.NET Web Page</tit

我在表单上有一个jQuery日期选择器，它下面有一个jQuery滑块。当我选择日期选择器时，日历会弹出，但滑块上的按钮在日历顶部可见

是否有办法确保日历位于表单上所有其他元素的顶部

以下是页面源代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My ASP.NET Web Page</title>
        <link href="../Styles/Site.css" rel="stylesheet" />
        <link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <link type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>

        <script type="text/javascript">
            //date picker
            $(function () {
                $("#classDate").datepicker({ minDate: 0 });
            });

            //Slider1
            $(function() {
                $("#slider1").slider({
                     value:60,
                     min: 0,
                     max: 120,
                     step: 5,
                     slide: function( event, ui ) {
                         $("#class1").val(ui.value);
                     }
                 });
                 $("#class1").val($("#slider1").slider("value"));
            });

            //Slider2
            $(function () {
                $("#slider2").slider({
                    value: 6,
                    min: 1,
                    max: 12,
                    step: 1,
                    slide: function (event, ui) {
                        $("#class2").val(ui.value);
                    }
                });
                $("#class2").val($("#slider2").slider("value"));
            });
        </script>
    </head>

    <body>
        <div id="page">
            <div id="main">
                <div id="content">
                    <form method="post" action="">
                        <fieldset>
                            <legend>Sign-up Form</legend>
                            <ol>
                                <li class="classDate">
                                    <label for="classDate">Date:</label>
                                    <input type="text" id="classDate" name="classDate" title="Start Date"  />
                                </li>
                                <li class="class1">
                                    <label for="class1">Slider1:</label>
                                    <input type="text" id="class1" name="class1" title="slider1" style="border:0; color:#f6931f; font-weight:bold;"  />
                                    <br/>
                                    <div id="slider1" class="slider" ></div>
                                </li>
                                <li class="class2">
                                    <label for="class2">Slider2:</label>
                                    <input type="text" id="class2" name="class2" title="slider2" style="border:0; color:#f6931f; font-weight:bold;"  />
                                    <br /><div id="slider2" class="slider" ></div>

                                </li>
                            </ol>
                            <p class="form-actions">
                                <input type="submit" value="createClass" title="createClass" />
                            </p>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

编辑：

仍然没有人接受这一点，所以这里有一张图片来说明这一点。左侧显示标准形式；一些盒子和滑块。右侧显示了当用户尝试选择日期时发生的情况。您可以看到滑块按钮出现在弹出的日历顶部

将此添加到CSS中：

.ui-datepicker {z-index:3!important;}

你能给我们看看你的密码吗？您还可以使用向我们展示完整的html源代码html源代码意味着bowser将获得的代码。