クリック後にポップアップ画像を表示<a>タグ

「表示」ボタンをクリック後、画像を表示したい。クリック後にポップアップ画像を表示<a>タグ

「postCardNumber」

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

は、コントローラカード番号（文字列）、およびカード画像用のコントローラクエリの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

ちょうど質問です。どのような解決策でも幸せである。 –

私は、過去にこのように、これを扱ってきた、それは非常にシンプルなものを保持しますので、それは私のために非常によく働いています。基本的には、2つ（またはそれ以上）の「レイヤー」でアプリケーションを構築します。その第2の層は、グローバルな邪魔者として働く。アプリ全体とのやり取りをすべてオフにすることができます。また、ポップアップを配置するために使用できます。あなたがポップアップをクリックすると、そのレイヤーをオンにして、ポップアップをスローします。ユーザーがポップアップレイヤーの他の場所をクリックすると、すべてのレイヤーが引き裂かれます。

この（非常に素朴な）サンプルでは、青色のボックスをクリックすると、ポップアップレイヤーが表示され、ポップアップが表示されます。ポップアップをクリックすると、コンソールにトレースが表示されます。他の場所をクリックすると、すべて消えます。必要に応じて、ポップアップがクリックされたときに、引き裂きロジックを適用することもできます。

<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>タグ

答えて

関連する問題