title: Showing Modal (light-box) to display items using Knockout JS
body: <p>I am working on a demo and I have two lists. </p>
  
  <ul>
  <li>Phones</li>
  <li>Favorite Accessories</li>
  </ul>
  
  <p>The Phone list shows phone name and its accessories and another list shows just the favorite accessories.</p>
  
  <p>The Phone list has an 'Edit' button.</p>
  
  <p>I would like to add a Modal dialog (or lightbox) to the 'Edit' button which would display all the favourite accessories.</p>
  
  <p>There should be a 'Save' button inside the Lightbox, which would save the favourite accessories against the product.</p>
  
  <p>Please have a look at my demo in <a href="http://jsfiddle.net/gm545Lt8/8/" rel="nofollow">JSFiddle</a>
  <br/></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
  
      &lt;tr class="tableHeaderRow"&gt;
  
          &lt;th&gt;
  
              &lt;span style="text-align: center; cursor: pointer; width: 150px; margin-right: 60px; float: left; margin-left: -35px;"&gt;Product 
              &lt;/span&gt;
  
  
          &lt;/th&gt;
          &lt;th&gt;Assesories
  
          &lt;/th&gt;
  
          &lt;th class="editCol"&gt;
          Edit 
  
  
      &lt;/tr&gt;
  
  
      &lt;!-- ko foreach: MobilePhone --&gt;
      &lt;tr class="tableRow"&gt;
  
  
  
          &lt;td class="licenseKeyCol" data-bind="text: product"&gt;&lt;/td&gt;
          &lt;td data-bind="foreach: Accesories"&gt;
              &lt;div&gt;
                  &lt;span data-bind="text: $data"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td class="editCol"&gt;
              &lt;a href="#" class="editButton"&gt;Edit
              &lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;!-- /ko --&gt;
  
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;b&gt;Favorite Accessories&lt;/b&gt;
  &lt;table&gt;
  
      &lt;tr class="tableHeaderRow"&gt;
  
  
          &lt;th&gt;Assesories
  
          &lt;/th&gt;
  
  
      &lt;/tr&gt;
  
  
      &lt;!-- ko foreach: FavoriteAccesories --&gt;
      &lt;tr class="tableRow"&gt;
          &lt;td data-bind="text: FavAccesories"&gt;&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;!-- /ko --&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Knockout JS</strong></p>
  
  <pre><code>function PhoneViewModel( )
                  {
                                  var self = this;
  
                                  self.MobilePhone = ko.observableArray([
                                                  { product : 'HTC', Accesories: ['Car Charger', 'Bluetooth']},
                                                  { product : 'iPhone 5',  Accesories: ['Battery'] },
                                                  { product : 'Galaxy S4', Accesories: ['Wall Adaptor']},
                                                  { product : 'Motorolla', Accesories: ['USB Cable', 'Earphone', 'AUX Cable']},
                                                  { product : 'Nokia Lumia', Accesories: ['Mobile Cover']},
                                                  { product : 'LG', Accesories: ['Earphone']}
                                              ]);
  
                                   self.FavoriteAccesories = ko.observableArray([
                                          { FavAccesories: 'Screen Cover', id: 1},
                                          { FavAccesories: 'Earphone', id: 2},
                                          { FavAccesories: 'Wall Charger' ,id:3}                                      
                                      ]); 
  
                  };
  
  
  
  
                  $(document).ready( function()
                  {      
  
                      ko.applyBindings( new PhoneViewModel() );
  
  
  
  
                  });  
  </code></pre>
  
  <p>Have a look at my demo in <a href="http://jsfiddle.net/gm545Lt8/8/" rel="nofollow">JSFiddle</a>
  <br/><br/>
  Please let me know how we can display all Favourite accessories in a Modal dialog box on clicking the 'Edit' button.</p>
  
  <p>Thank you.</p>
  
  <p>Sid</p>