7 Replies Latest reply on Jan 5, 2014 3:35 AM by jpatro

    Need help with Jquery+Modal window

    Novice

      Hi All,

       

      I want to open a link in modal window. I got lot of jquery plugins which works well in a dummy page but i am not able to make it work on jive SBS 4.0. So here are my doubts. It will be great if some one can put some light on them.

       

      1) Do jive supports jquery inbuilt? Also does it comes with prototype inbuilt? Is there any limitations?

      2) If it comes with jquery is there a way to remove it so that i can use my custom jquery/Latest available jquery?

      3) Is there an existing modal window some where in jive sbs which i can reuse? (Desired option.)

       

       

      Thanks,

        • Re: Need help with Jquery+Modal window
          Novice

          Here there,

          Neo - wrote:

           

          Hi All,

           

          I want to open a link in modal window. I got lot of jquery plugins which works well in a dummy page but i am not able to make it work on jive SBS 4.0. So here are my doubts. It will be great if some one can put some light on them.

           

          1) Do jive supports jquery inbuilt? Also does it comes with prototype inbuilt? Is there any limitations?

          2) If it comes with jquery is there a way to remove it so that i can use my custom jquery/Latest available jquery?

          3) Is there an existing modal window some where in jive sbs which i can reuse? (Desired option.)

           

           

          Thanks,

          We do include jquery. Version 4.0.x of the product ships with jquery 1.3.2. It is not recommended that this be replaced, because it could interfere with existing functionality.

           

          Prototype is shipped with some versions of the software, but generally it is better not to use it because it will be disappearing in future versions. JQuery is a better bet.

           

          In order to create a model dialog, you have a few options. It is possible to use the jQuery.lightbox_me() call to create a modal dialog without adding any additional libraries. If you would rather use jquery UI, then you will need to add that javascript dependency. 4.0.x also ships with jquery.ui 1.71 but not with dialog support. You would have to add that yourself. You would need to make sure you were using the right version (again 1.7.1) or it would probably not work.

           

          My suggestion? Probably just used the built in lightbox_me() call and then you don't need any additional dependencies.

          • Re: Need help with Jquery+Modal window
            Novice

            Hi Kaushik,

             

            I had the same issue with using a modal window, so I followed Daniel's advice and used the lightbox_me(). It works great and I will probably use this plugin on other sites where I use modal windows. You can paste this sample code into an HTML Widget to see it work:

             

            <script>

            (function($) { 

            $(document).ready(function(){

            $('#openModalLink').click(function(e) {

            $('#modalWindow').lightbox_me({

            centered: true

            });

            e.preventDefault();

            });

            });

            })(jQuery);

            </script>

             

            <div style="padding:10px">

            <a id="openModalLink" class="j-button" href="#">Open Modal Window</a>

            </div>

            <div id="modalWindow" style="display:none; padding:50px; background:#fff;">

            <h1>This is a test modal window!!!</h1>

            <br /><br />

            <a class="j-button close" href="#">Close Window</a>

            </div>

             

            Here is the Lightbox_me website with documentation and a demo: Lightbox_me - Stupidly Simple Lightboxing - The jQuery lightbox plugin for people who know what they're doing.

            • Re: Need help with Jquery+Modal window
              deesteel Advanced

              Hi Kaushik,

               

              As jbove stated, using lightbox_me is a great solution for Modal windows. Here is an example you can copy and paste into an HTML widget, just replace the DOCID (line 32) with a valid doc in your instance, and it will embed a document into a modal window. This will work with Jive 4, 4.5 or Jive 5. To use Jive's embedded version of jquery make sure you use the $j operator.

               

              <style>
                #modal_text5 {
                      text-align: left;
                      background: #eef2f7;
                      border: 1px solid #536376;
                      padding: 14px 22px;
                      width: 800px;
                      height: 600px;
                      position: relative;
                      display: none;
                overflow:auto;
                      -webkit-border-radius: 6px;
                      -moz-border-radius: 6px;
                      -webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
                      -moz-box-shadow:  rgba(0,0,0,.6) 0px 2px 12px;;
              
              
                  }
              </style>
              
              
                <script type="text/javascript" charset="utf-8">
                      $j(function() {
                          function launch() {
                               $j('#modal_text5').lightbox_me({
                centered: true, 
                onLoad: function() { }
                });
                          }
                          
                          $j('#launchDoc').click(function() {
                $j.get("/docs/DOC-16506", function(data){
                var x = $j('#jive-body-main div.jive-rendered-content',$j(data)).html();
                x = x + '<a id="close" href="#">close</a>';
                $j('#modal_text5').html(x);
                });
                              $j("#loader").lightbox_me({
                centered: true});
                              setTimeout(launch, 2000);
                              return false;
                          });
                               
              
              
              
              
                          
                      });
                      </script>
              
              
              
              
              <p><a href="#" id="launchDoc">Read My Document</a></p>
              
              
              
              
              <div id="modal_text5" style="display:none";></div>
              

               

              Hope that helps.