如何通過asp.Net中的按鈕點擊打開彈出窗口

Question

我在asp.Net中創建一個網站。我想使用彈出窗口來執行操作。我有一個超鏈接運行的彈出窗口。

我想要執行此操作在按鈕單擊上完成。有沒有什麼辦法以編程方式執行這個動作。如何執行此操作。

我的代碼如下： -

HTML代碼： -

<a href="#" data-reveal-id="myModal"> 
    Fade and Pop 
    </a> 
     <div id="myModal" class="reveal-modal"> 
     <h1>Reveal Modal Goodness</h1> 
     <p>This is a default modal in all its glory, but any of the styles     here can easily be changed in the CSS.</p> 
     <a class="close-reveal-modal">&#215;</a> 
    </div> 

JavaScript函數： -

$('a[data-reveal-id]').live('click', function(e) { 
    e.preventDefault(); 
    var modalLocation = $(this).attr('data-reveal-id'); 
    $('#'+modalLocation).reveal($(this).data()); 
    }); 

$.fn.reveal = function(options) { 

    var defaults = { 
     animation: 'fadeAndPop', //fade, fadeAndPop, none 
     animationspeed: 300, //how fast animtions are 
     closeonbackgroundclick: false, //if you click background will modal close? 
     dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal 
    }; 

    //Extend dem' options 
    var options = $.extend({}, defaults, options); 

    return this.each(function() { 

     var modal = $(this), 
      topMeasure = parseInt(modal.css('top')), 
      topOffset = modal.height() + topMeasure, 
      locked = false, 
      modalBG = $('.reveal-modal-bg'); 

     if(modalBG.length == 0) { 
      modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal); 
     }   

     //Entrance Animations 
     modal.bind('reveal:open', function() { 
      modalBG.unbind('click.modalEvent'); 
      $('.' + options.dismissmodalclass).unbind('click.modalEvent'); 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "top": $(document).scrollTop()+topMeasure + 'px', 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "fade") { 
        modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure}); 
        modalBG.fadeIn(options.animationspeed/2); 
        modal.delay(options.animationspeed/2).animate({ 
         "opacity" : 1 
        }, options.animationspeed,unlockModal());     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure}); 
        modalBG.css({"display":"block"}); 
        unlockModal()    
       } 
      } 
      modal.unbind('reveal:open'); 
     });  

     //Closing Animation 
     modal.bind('reveal:close', function() { 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "top": $(document).scrollTop()-topOffset + 'px', 
         "opacity" : 0 
        }, options.animationspeed/2, function() { 
         modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "fade") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "opacity" : 0 
        }, options.animationspeed, function() { 
         modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'hidden', 'top' : topMeasure}); 
        modalBG.css({'display' : 'none'}); 
       }  
      } 
      modal.unbind('reveal:close'); 
     });  

     //Open Modal Immediately 
    modal.trigger('reveal:open') 

     //Close Modal Listeners 
     var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function() { 
      modal.trigger('reveal:close') 
     }); 

     if(options.closeonbackgroundclick) { 
      modalBG.css({"cursor":"pointer"}) 
      modalBG.bind('click.modalEvent', function() { 
       modal.trigger('reveal:close') 
      }); 
     } 
     $('body').keyup(function(e) { 
      if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key 
     }); 


     function unlockModal() { 
      locked = false; 
     } 
     function lockModal() { 
      locked = true; 
     } 

    }); 
} 

Answer 1

在jQuery中，你可以像這樣打開一個彈出，這裏你可以通過你的html在.html：

var customDialog = function (options) { 
     $('<div></div>').appendTo('body') 
         .html('<input type="checkbox" id="myCheckBox" />Test Checkbox<div style="margin-top: 15px; font-weight: bold;">' + options.message + '</div>') 
         .dialog({ 
          modal: true, 
          title: options.title || 'Custom Popup Box', zIndex: 10000, autoOpen: true, 
          width: 'auto', resizable: false, 
          buttons: { 
           Ok: function() { 
            $(this).dialog("close"); 
           }, 
          }, 
          close: function (event, ui) { 
           $(this).remove(); 
          } 
         }); 
}; 

$('#myButton').click(function() { customDialog({message: 'your input message '}); }); 

現在你可以調用這個方法，按鈕點擊等

customDialog({message: 'Test Message'}); 

入住這JS Fiddle [編輯]要呼叫錨標記檢查一個jQuery函數這個fiddle