Open Modal without changing page position

Asked

Viewed 261 times

-1

Expensive;

I use Modal Bootstrap inside a While to show captured images inside my Database

When I have several lines, with several images, when opening the last ones for example, Popup opens without problems, but the page goes back to the top. Is there any way to leave the page in the same position as the modal popup?

Script that opens the Modal 

<script>

$(".abrirModal").click(function() {
   var url = $(this).find("img").attr("src");
  $("#myModal img").attr("src", url);
  $("#myModal").modal("show");
});

</script>

While in PHP to show modal when clicked:

<td><a href="#"  class="abrirModal"><img width=40px" height="40px" src ="imagem/<?php echo $fetch['imagem']; ?>" /></td>

I tried to use the solution of this question, but my page goes back to the top and when I cancel the modal, I lose the scroll bar :

Prevent scrolling of the screen when opening modal

php bootstrap

  • I’m a little out of time right now, but I think your problem is <a href="#" ..., tries to replace by <a href="javascript:void(null);" ...

  • Boaaaaa, dude helped me a lot. Out of curiosity, what’s the difference between one and the other? abs.

  • <a href="#minhaAncora" looks for an anchor in html something like <a name="minhaAncora" or a <div id="minhaAncora", in the case as it was left only the # he returns to the top of the page, already the javascript:void(null); is executing a javascript function in the void(null) that does nothing, could be javascript:alert(1);.

  • Good. Thank you very much. abs

  • It looks like you got an answer in the comment. Don’t leave it open like that, create an answer. It might help someone who has the same question in the future.

  • @Shutupmagda has already solved this case. I can tick as solved?

  • You can answer your own question: https://answall.com/help/self-answer

Show 2 more comments

1 answer

1


This topic was solved with the help of colleague @Icaro Martins, as follows:

<a href="#minhaAncora" looks for an anchor in html something like <a name="minhaAncora" or a <div id="minhaAncora", in the case as it was left only the # he returns to the top of the page, already the javascript:void(null); is executing a javascript function in the void(null) that does nothing, could be javascript:alert(1);

Browser other questions tagged php bootstrap

You are not signed in. Login or sign up in order to post.