Question

问题：我有一个标签，您必须在其中放置日期，点击标签后应显示日历。我制作了一个jQuery脚本，它会使背景变暗但在此日历开始后不会出现在他的位置。我正在尝试使用 offset（），但写完后没有任何事情发生：

（部分）代码：

< script > // code with issue
  $(document).ready(function() {
    //Get
    var p = $(".e_darker");
    var offset = p.offset();
    //set    
    $(".calendar_in_place").offset({
      top: offset.top,
      left: offset.left
    });
  }); <
/script>

<
script > // scrolls down page to input label
  $(function() {

    $("#radio_eventi").click(function() {
      $('html,body').animate({
          scrollTop: $("#radio_eventi").offset().top
        },
        'slow');
    });
  }); <
/script> <
script > // makes dark background appear/dissapear
  $(document).ready(function() {
    $(".e_darker").click(function() {
      if ($("#darker").show(150)) {
        $(document).mouseup(function() {
          $("#darker").hide(150);
        });
        $(".e_darker").mouseup(function() {
          $("#darker").hide(150);
        });
      } else {
        $("#darker").show(150);
      }
    });
  }); <
/script>

.calendar_in_place {
  top: 0 !important;
  left: 0 !important;
}

.in-front {
  z-index: 6;
}

#darker {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  display: none;
  transition: opacity 0.15s linear;
  z-index: 5;
}

<head></head>

<body>
  <div id="darker"> </div>
  <!-- div that makes background darker -->
  <!-- imput label -->
  <section id="eventi_spec" class="nascondi">
    <div class="form-group">
      <label for="datetimepicker11" class="label_no_middle">Data di avvio dell'evento</label>
      <input type="text" placeholder="GG/MM/AAAA" data-mask="99/99/9999" class="form-control in_front e_darker" id="datetimepicker11">
    </div>
</body>

网站使用Bootstrap。

Answer 1

在查看您的代码之后，似乎问题在于您设置为.calendar_in_place的样式。您使用!important设置位置，因此它会覆盖您使用jquery offset设置的值。

您可以使用CSS（）代替并删除！important

请参阅下面的代码段中的.test div

＆＃13;

    //Get
    var p = $(".e_darker");
    var offset = p.offset();
    //set    
    $(".test").css({ top: offset.top, left: offset.left })

＆＃13;

.calendar_in_place {
  top: 0 !important;
  left: 0 !important;
}

.test {
  top: 0 ;
  left: 0 ;
  width: 100px;
  height: 100px;
  background: red;
	position:absolute;
}

#darker {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  display: none;
  transition: opacity 0.15s linear;
  z-index: 5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="darker"> </div>
<!-- div that makes background darker -->
<!-- imput label -->
<section id="eventi_spec" class="nascondi">
  <div class="form-group">
    <label for="datetimepicker11" class="label_no_middle">Data di avvio dell'evento</label>
    <input type="text" placeholder="GG/MM/AAAA" data-mask="99/99/9999" class="form-control in_front e_darker" id="datetimepicker11">
  </div>
  <div class="test">
  </div>

＆＃13;

使用jQuery的offset（）编写脚本

1 个答案: