Показать всплывающее изображение после нажатия <a> tag

Я хочу показать изображение после нажатия кнопки «показать». Моя кнопка это:Показать всплывающее изображение после нажатия <a> tag

<a onclick="postCardNumber(this)" href="#">Show</a>

«postCardNumber» отправляется на контроллер номер карты (String), и MongoDB запроса контроллер для изображения карты, а затем Монго и контроллер получить изображение, чтобы показать ,

Функция:

function postCardNumber(tr) { 

    var CardNumber = $(tr).closest("tr").find(".card-number").html(); 

    $.post("/CreditCard/ShowImage", CardNumber, function(response){ 
     //show the response(its byte array image) 
    }); 

}

Мой вопрос заключается в том, чтобы показать всплывающее изображение после щелчка по этой метке <a>, и закрыть его после нажмите в любом месте на экране? В любом случае, без jquery?

источник

2017-01-19 Ballon Ura

Почему без jquery или js? – zod

Просто вопрос. плохо быть счастливым в любом решении. –

Я перевалено это в прошлом, таким образом, он работал очень хорошо для меня, потому что он держит вещи очень просто. Вы в основном создаете свое приложение в двух (или более) «слоях». Этот второй уровень действует как глобальный дезадаптер; его можно использовать для отключения всего взаимодействия со всем приложением, и его можно использовать для размещения всплывающих окон. Таким образом, вы включаете этот слой, бросаете на него всплывающее окно, если пользователь нажимает всплывающее окно, как обычно. Если пользователь щелкнет в другом месте на всплывающем слое, вы полностью оторвите его.

В этом (чрезвычайно наивном) образце вы щелкаете синим квадратом, он отображает всплывающее окно и помещает на него всплывающее окно. Нажмите всплывающее окно, вы увидите трассировку в консоли. Нажмите в другом месте, все исчезнет. Если вы хотите, чтобы щелкнуть всплывающее окно, вы также можете применить логику слеза.

<html> 
    <head> 
    </head> 
    <body> 
     <div id="maincontent"> 
      <div style="width: 100px; height: 50px; background-color: blue; color: white" onclick="onBlueDivClick ()">click me</div> 
     </div> 
     <div id="popups" onclick="onPopupBackgroundClicked ()" style="visibility: hidden; position: fixed; top: 0; width: 100%; height: 100%;"></div>   

     <script> 
      var popupLayer = document.querySelector ("#popups"); 
      var currentPopup; 

      function onBlueDivClick () { 
      popupLayer.style.visibility = 'visible'; 

      currentPopup = document.createElement ("div"); 
      currentPopup.style.width = '200px'; 
      currentPopup.style.height = '200px'; 
      currentPopup.style [ 'background-color' ] = 'green'; 
      currentPopup.style.color = 'yellow'; 
      currentPopup.innerText = 'Click Popup'; 
      currentPopup.onclick = onPopupClick; 

      popupLayer.appendChild (currentPopup); 
      } 

      function onPopupClick (event) { 
      console.log ("clicked me"); 
      // VERY important. Stops "click through" to background. 
      event.stopPropagation (); 
      } 

      function onPopupBackgroundClicked () { 
      if (currentPopup) { 
       popupLayer.removeChild (currentPopup); 
       // if you don't do this, the element will be "gone" from view, 
       // but it will not be undefined. 
       currentPopup = undefined; 
      } 

      popupLayer.style.visibility = 'hidden'; 
      } 
     </script> 
    </body> 
</html>

источник

2017-01-19 23:09:58

Обратите внимание, что вы можете добавлять и удалять этот всплывающий слой динамически, если хотите, и позиционирование всплывающего окна в основном сводится к небольшой арифметике (если элемент с щелчком составляет 500 пикселей по странице, а размер текущего окна - 300, поместите всплывающее окно при y = 200). Вам не нужно вычислять X, если ваше приложение не прокручивается влево и вправо. Я сделал это в каждом приложении, которое я написал много лет (если ему нужны всплывающие окна), и он никогда не терпит неудачу. Фактически это используется в приложении Google, которое я нанял для их создания. –

Показать всплывающее изображение после нажатия <a> tag

ответ

Смежные вопросы