Showing Modal (light-box) to display items using K

问题:

I am working on a demo and I have two lists.

• Phones
• Favorite Accessories

The Phone list shows phone name and its accessories and another list shows just the favorite accessories.

The Phone list has an 'Edit' button.

I would like to add a Modal dialog (or lightbox) to the 'Edit' button which would display all the favourite accessories.

There should be a 'Save' button inside the Lightbox, which would save the favourite accessories against the product.

Please have a look at my demo in JSFiddle

HTML

<table>

    <tr class="tableHeaderRow">

        <th>

            <span style="text-align: center; cursor: pointer; width: 150px; margin-right: 60px; float: left; margin-left: -35px;">Product 
            </span>


        </th>
        <th>Assesories

        </th>

        <th class="editCol">
        Edit 


    </tr>


    <!-- ko foreach: MobilePhone -->
    <tr class="tableRow">



        <td class="licenseKeyCol" data-bind="text: product"></td>
        <td data-bind="foreach: Accesories">
            <div>
                <span data-bind="text: $data"></span>
            </div>
        </td>

        <td class="editCol">
            <a href="#" class="editButton">Edit
            </a>
        </td>
    </tr>

    <!-- /ko -->

</table>
<br />
<b>Favorite Accessories</b>
<table>

    <tr class="tableHeaderRow">


        <th>Assesories

        </th>


    </tr>


    <!-- ko foreach: FavoriteAccesories -->
    <tr class="tableRow">
        <td data-bind="text: FavAccesories"></td>

    </tr>
    <!-- /ko -->

</table>

Knockout JS

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() );




                });  

Have a look at my demo in JSFiddle

Please let me know how we can display all Favourite accessories in a Modal dialog box on clicking the 'Edit' button.

Thank you.

Sid