jQuery 슬라이더 버튼이 데이터 선택기를 통해 표시됩니다.

양식의 jQuery 날짜 표시기와 그 바로 아래에있는 jQuery 슬라이더가 있습니다. datepicker를 선택하면 캘린더가 팝업되지만 슬라이더의 버튼이 캘린더 상단에 표시됩니다.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>

편집 : 이것에

여전히 빼앗고, 그래서 여기 명확하게 할 수있는 이미지의

은 다음 페이지 소스 코드입니다. 왼쪽은 정상적인 형태를 보여줍니다. 몇 상자와 슬라이더. 오른쪽은 사용자가 날짜를 선택하려고 할 때 일어나는 일을 보여줍니다. 팝업창에 슬라이더 버튼이 나타납니다.

jQuery Slider appearing on top of calendar

출처

2011-11-18 Qwerty.ie

당신이 우리에게 코드를 게재 할 수 있습니까? 또한 http://jsfiddle.net을 사용하여 완전한 HTML 소스 코드를 표시 할 수 있습니다 (HTML 소스 코드는 bowser가 얻을 코드를 의미합니다). – reporter

은 CSS이 추가 :

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

출처

2011-11-22 16:47:44 MikeM

jQuery 슬라이더 버튼이 데이터 선택기를 통해 표시됩니다.

답변

관련 문제