Question

I want to show image after click "show" button. My button is this:

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

The "postCardNumber" is send to the controller the card number (String), and the controller query mongodb for the card image, and then mongo and the controller retrieve the image to show.

The Function:

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)
    });

}

My question is how to show the popup image after click on that <a> tag, and close it after click on anywhere on the screen ? There is anyway without jquery?

后显示弹出式图片

Answer 1

我过去用这种方式处理过这个问题，它对我来说非常有效，因为它让事情变得非常简单。您基本上可以在两个（或更多）“层”中构建应用程序。第二层充当全局禁用者;它可以用来关闭与整个应用程序的所有交互，它可以用来放置弹出窗口。因此，如果用户单击弹出窗口，那么您打开该图层，将弹出窗口置于其上，照常营业。如果用户点击弹出图层上的任何其他位置，则将其全部拆除。

在这个（非常天真）的示例中，单击蓝色框，它取消隐藏弹出图层并在其上放置一个弹出窗口。单击弹出窗口，您将在控制台中看到跟踪。点击其他地方，一切都消失了。如果需要，单击弹出窗口时，您也可以应用拆卸逻辑。

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

点击<a> tag

1 个答案: