0

ボタンでモーダルを閉じることができないようです.Webページがロードされ、オーバーレイでモーダルが自動的にポップアップします.しかし、ページを自動的にロードするときではなく、ボタンを使用してモーダルを開きたい.

ここに私のモーダルと開閉ボタンがあります：

モーダル、オーバーレイ、コンテンツ:

     <div id='overlay'>
       </div>
       <div id='modal'>
           <div id='content' style="background-color: #767A8F; font-family: Segoe UI; font-size: Medium; z-index: 1; left: 280px; top: 800px; position: fixed; height: 160px; width: 20px;">
               <br />
               <Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />
        </div>

閉じるボタン:

<asp:Button ID="close" class="close" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI;                                 margin-left: 0px; position: absolute; top: 418px; left: 5px; width: 64px; height: 44px; z-index: 1; margin-top: 0px; right: 112px;" Text="Cancel" />

開くボタン:

<asp:Button class="open" ID="open" runat="server" BackColor="#525663" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large" ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative; top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information" />

そして JavaScript コード:

<script src="js/jquery-ui-1.8.14.js" type="text/javascript"></script>




<script>

           var modal = (function () {
               var method = {},$overlay,$modal,$content,$close,$open;

               // Center the modal in the viewport
               method.center = function () {
                   var top, left;
                   top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                   left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
                   $modal.css({ top: top + $(window).scrollTop(), left: left });
               };


               // Open the modal
               method.open = function (settings) { };

               // Close the modal
               method.close = function () { };

               return method;
           } ());


           $overlay = $('<div id="overlay"></div>');
           $modal = $('<div id="modal"></div>');
           $content = $('<div id="content"></div>');
           $close = $('<a id="close" href="#">close</a>');
           $open = $('<a id="open" href="#">open</a>');

           $modal.hide();
           $overlay.hide();
           $modal.append($content, $close);

           $(document).ready(function () {
               $('body').append($overlay, $modal);
           });




           method.center = function () {
               var top, left;

               top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
               left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

               $modal.css({
                   top: top + $(window).scrollTop(),
                   left: left + $(window).scrollLeft()
               });
           };




           method.open = function (settings) {
               $content.empty().append(settings.content);

               $modal.css({
                   width: settings.width || 'auto',
                   height: settings.height || 'auto'
               })

               method.center();

               $(window).bind('resize.modal', method.center);

               $modal.show();
               $overlay.show();
           };


           method.close = function () {
               $modal.hide();
               $overlay.hide();
               $content.empty();
               $(window).unbind('resize.modal');
           };



           $open.click(function (e) {
               e.preventDefault();
               method.open();
           });


           $close.click(function (e) {
               e.preventDefault();
               method.close();
           });



           modal.open({ content: "Howdy" });

           modal.open({ content: "<p>Howdy</p>" });

           modal.open({ content: $("<p>Howdy</p>"), width: "500px", height: "200px" });

           // Ajax
           $.get('ajax.html', function (data) {
               modal.open({ content: data });
           });


       </script>
4

1 に答える 1

0

詳細: Jquery クリック イベントに追加します。e.preventDefault を追加して、ページのポストバックを停止することを忘れないでください。それ以外の場合は、HTML ボタンを使用してください。

$('.Open').click(function (e) 
{
   var method = {},..... // Your normal code


   e.preventDefault(); 
}

オプション:おそらく、Jquery ダイアログを使用してモーダルにすると、ニーズにより適したものになります。詳細: Jquery ダイアログ

于 2012-10-30T06:49:10.260 に答える