ansaurus

Question

Simple Modal issues - Multiples, Disappearing Content

Answer 1

A:

When you hide the dialog, jQuery changes the position of the div in the DOM, then wanting to locate it with "$(this).next(...)", you can not do. You should have some ID or a reference to locate otherwise.

EDIT: Well, you have me thinking a little echo. I hope it is useful the code that I'm going through. I'm not tested:

$('input.basic, a.basic').click(function (e) 
{ 
   e.preventDefault(); 
   var el = "";

   if($(this).data("xid")!=undefined)
   {
      el = $($(this).data("xid"));
   }
   else
   {
     var xid = "xid_" + ((new Date()).getTime());
     el = $(this).next('.basicModalContent');
     $(this).data("xid", xid);
     if (el.lenght>0)
       el.attr("id", xid);
   }

   if (el.lenght>0)
   {
     el.modal();
   }
});

andres descalzo 2009-11-02 16:31:29

the page is pulling dynamic content, so i have no way of knowing how many modal links there could be, or how to reference them.

Corey Greeneltch 2009-11-02 18:00:23

Answer 2

+1 A:

I would suggest something like:

Links:

<a href="#" class="basic" id="link-1">link1</a>
<a href="#" class="basic" id="link-2">link2</a>
<a href="#" class="basic" id="link-3">link3</a>

Hidden content (via CSS or inline style)

<div id="link-1-content" style="display:none">
<p>content</p>
</div>
<div id="link-2-content" style="display:none">
<p>content</p>
</div>
<div id="link-3-content" style="display:none">
<p>content</p>
</div>

JavaScript:

$(document).ready(function () {
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
              e.preventDefault();
              var content = '#' + this.id + '-content';
              $(content).modal();
      });
});

Something like that should do the trick.

Eric Martin 2009-11-02 19:15:43

this is perfect, thanks so much eric (your customer support is the BEST!!)

Corey Greeneltch 2009-11-04 17:54:31

Answer 3

A:

Thanks Eric! This ist GREAT!!!!!

Andreas 2009-11-03 09:12:00

Answer 4

A:

A solution that requires less markup is to use a single modal "window." See the following example:


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Simple Modal Demo</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
 <script type="text/javascript" src="simplemodal.js"></script>
 <script type="text/javascript">
  $(document).ready(
    function() {
     $('.loginRequired').bind('click',
      function() {
       $('#clickedLink').html(this.id);
       $('#modalWindow').modal();
       return false;
      }
     );
    }
  );
 </script>

 <style>
  #simplemodal-container { display: none; }
  #simplemodal-overlay { background: #000; opacity: 0.4; }
  #modalWindow {
   background: #FFF;
   border: 1px solid black;
   height: 100px;
   opacity: 1.0;
   padding: 10px;
   position: relative;
   width: 220px;
   z-index: 1010;
  }
 </style>
</head>
<body>
 <p><a href="http://example.com/&quot; id="link1" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/&quot; id="link2" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/&quot; id="link3" class="loginRequired">Login Required Link</a></p>
 <p><a href="http://example.com/&quot;&gt;http://example.com/&lt;/a&gt;&lt;/p&gt;

 <div id="simplemodal-container">
  <div id="modalWindow">
   <p>Sorry, you must login to click <b id="clickedLink">unknown</b>.</p>
   <p><a href="#" class="simplemodal-close">Cancel</a></p>
  </div>
 </div>

</body>
</html>

jsumners 2009-11-10 21:12:04

ansaurus

tags:

views:

answers:

Simple Modal issues - Multiples, Disappearing Content

related questions