Сделайте Div развернутым в определенном месте

Question

Сделайте Div развернутым в определенном месте

2 принят

Вы можете получить нажатую позицию с помощью event.pageXи event.pageY, и вы можете использовать их для получения желаемого эффекта

В приведенном ниже коде мода мода начнет расширяться с позиции щелчка

См. Фрагмент:

$("#touchScreen").click(function(event) {

  var target = $(this).attr("data-target");
   

  $(target).css({
    "left": event.pageX,
    "top": event.pageY
  });

  $(target).animate({
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    opacity: 1
  }, 10, function() {
    // Animation complete.
  });

});

$("#close").click(function(event) {

  $(".modalDialog").animate({
    width: '0',
    height: '0',
    opacity: 0,
  }, 100, function() {
     $(this).css({
    "left": "",
    "top": ""
  });
  });



});

#touchScreen {
  height: 400px;
  width: 400px;
  background-color: blue;
}

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  -webkit-transition: all 400ms ease-in;
  -moz-transition: all 400ms ease-in;
  transition: all 400ms ease-in;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.modalDialog>div {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  position: center;
  right: 20px;
  text-align: center;
  width: 25px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  background: #00d9ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=touchScreen data-target="#openModal">

</div>
<div id="openModal" class="modalDialog">
  <div> <a id="close" title="Close" class="close">X</a>

    <h2>Pop Out Div</h2>

    <p>This Div fades in on click, and covers the entire viewport</p>
    <p>Is it possible to detect the location of the click on the blue space and then make this div pop/expand out to fill the screen from that location?</p>
  </div>
</div>

0

вы можете использовать clientXи clientYполучить позицию щелчка. затем поместите openModal в это положение

$("#touchScreen").click(function(e) {
    var xPos = e.clientX,
    yPos = e.clientY
  window.location = window.location + "#openModal";
        $('#openModal').css({"top":yPos,"left":xPos})
});

#touchScreen {
  height: 400px;
  width: 400px;
  background-color: blue;
}

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  position: center;
  right: 20px;
  text-align: center;
  width: 25px;
  text-decoration: none;
  font-weight: bold;
}

.close:hover {
  background: #00d9ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=touchScreen href="#openModal">

</div>
<div id="openModal" class="modalDialog">
  <div> <a href="#close" title="Close" class="close">X</a>

    <h2>Pop Out Div</h2>

    <p>This Div fades in on click, and covers the entire viewport</p>
    <p>Is it possible to detect the location of the click on the blue space and then make this div pop/expand out to fill the screen from that location?</p>
  </div>
</div>

JavaScript, JQuery, CSS, HTML5, CSS3,

javascript,jquery,css,html5,css3,

0

Ответов: 2