单击图标时，出现一个带有复选框列表的弹出窗口

Question

I have a table in my page, for which I get the data from database. In some cells I have an edit icon.I want when users clicks on it, they see a pop up window.

In the pop up window, I want to show three option(check boxes), that user can select only one of them, and then click on OK button, and return the value of the selected option to the data variable.(as you see in the code below)

I have to mention, that right now when the user clicks on the edit icon, some information are sent to another file. Because I need to update database.

   $(".SSO").click(function () {
    var id = $(this).attr("data-id");
    var data= HERE I NEED TO GET THE VALUE OF THE SELECTED OPTION IN THE POP UP WINDOW
  }

So SSO is the value of class attribute for the image icon. data-id value helps to update the correct record in the database.

Right now this is the code in one file:

 $(".SSO").click(function()

 {
   var id = $(this).attr("data-id");
   // open popup window and pass field id
   window.open('sku.php?id=' + encodeURIComponent(id),
       'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}

and this is the code in sku.php

  <script type="text/javascript">
        function sendValue (s){
          var parentId = <?php echo json_encode($_GET['id']); ?>;
          window.opener.updateValue(parentId, s);
          window.close();
          window.close();
        }
        </script>

        <form name="selectform">
        <input type=button value="OK" onClick="sendValue(document.querySelector('.messageCheckbox:checked').value);"
       </form>

Mu form right now has only OK button, when when I click on teh edit button, nothing happens. Should not I see a pop up window, with OK button inside it?

Answer 1

Typically a popup windows is shown with alert() or something similar, which causes the browser to make an actual popup window. That kind of popup window cannot have HTML elements added to it. You could do something like this http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript

I used those in a website and I liked them a lot, but I am not a fan of the css :target selector, so I opened it with Javascript instead, but it is pretty much the same thing.