Simple Modal issues - Multiples, Disappearing Content

后端 未结 3 1411
既然无缘
既然无缘 2021-01-27 15:55

I\'m a jQuery newbie and have rigged Simple Modal to allow me to have more than one modal on a page by doing this in my script:

$(\'input.basic, a.basic\').click(f

相关标签:
3条回答
  • 2021-01-27 16:31

    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();
       }
    });
    
    0 讨论(0)
  • 2021-01-27 16:32

    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.

    0 讨论(0)
  • 2021-01-27 16:34

    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"></script>
     <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/" id="link1" class="loginRequired">Login Required Link</a></p>
     <p><a href="http://example.com/" id="link2" class="loginRequired">Login Required Link</a></p>
     <p><a href="http://example.com/" id="link3" class="loginRequired">Login Required Link</a></p>
     <p><a href="http://example.com/">http://example.com/</a></p>
    
     <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>
    
    
    0 讨论(0)
提交回复
热议问题