Modal window disappear after asp.net postback

[mohammad]

Hello,
I'm using qtip to dynamically load another asp.net page as modal. this page has some buttons that cause a postback. the problem is after postback the modal qtip disappears and the asp.net page is shows in a separate browser window. parent widnow code follows.
I've been trying to fix this problem for a long time so any help will be highly appreciated.

Thanks,
Mohammad

JS Code

<script type="text/javascript">
        $(document).ready(function() {
            $('a[rel="modal"]:first').qtip(
   {
       content: {
           title: {
               text: 'my Page',
               button: 'Close'
           },
           url: 'mypage.aspx'
       },
       position: {
           target: $(document.body), 
           corner: 'center' 
       },
       show: {
           when: 'click', 
           solo: true 
       },
       hide: false,
       style: {
           width: { max: 500 },
           padding: '14px',
           border: {
               width: 9,
               radius: 9,
               color: '#666666'
           },
           name: 'light'
       },
       api: {
           beforeShow: function() {
               $('#qtip-blanket').fadeIn(this.options.show.effect.length);
           },
           beforeHide: function() {
               $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
           }
       }
   });
 
            // Create the modal backdrop on document load so all modal tooltips can use it
            $('<div id="qtip-blanket">')
      .css({
          position: 'absolute',
          top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
          left: 0,
          height: $(document).height(), // Span the full document height...
          width: '100%', // ...and full width
 
          opacity: 0.5, // Make it slightly transparent
          backgroundColor: 'black',
          zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
      })
      .appendTo(document.body) // Append to the document body
      .hide(); // Hide it initially
        });
    </script>

HTML Code

<form id="form1" runat="server">
    <div>
        <div id="content" class="modal">
            <div class="center" style="text-align: center">
                <a href="#" rel="modal">Click here to open modal</a>
            </div>
        </div>
    </div>
    </form>

[Craig]

Mohammed, are you wanting the pages returned by these buttons to be placed in the qTip content? If so, it's probably a better idea to use an Iframe element, or you could possibly attach an event handler to these buttons which fetches the pages via AJAX and adjust the qTip content accordingly.