How To Use PopUp window for Update record and delete

=======VFPAGE============================

<apex:page sidebar="false" controller="Pouup" id="Thepage">

  <style type="text/css">

    .puoup{

           background-color:white;

           border width:3px;

           border-style: solid;

            z-index: 9999;

            left: 50%;

            padding:10px;

            position: absolute;

            width: 500px;

            margin-left: -250px;

            top:80px;

    }

    .poupblog{

            background-color:Red;

            opacity: 0.20;

            filter: alpha(opacity = 70);

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            z-index: 9998;

    }

  </style>

  <apex:form >

    <apex:messages />

    <Center>

      Select book

      <apex:selectList value="{!bks}" size="1" id="sl">

        <apex:selectOptions value="{!bklist}"></apex:selectOptions>

      </apex:selectList>

      <apex:commandButton value="Showvalue" action="{!puouup}" reRender="op"/>

    </center>

    <apex:pageblock id="pb">

       <apex:pageblocktable var="bk" value="{!AllBks}" id="pbt">

         <!--apex:column width="100">

         <apex:commandLink value="Edit" />&nbsp;

         <apex:commandLink value="delete" action="{!del}"/>

         </apex:column>

         -->

         <apex:column headerValue="Book Name" >

           <apex:outputtext value="{!bk.name}"/>

         </apex:column>

         <apex:column headerValue="Book Author" >

           <apex:outputtext value="{!bk.Author__c}"/>

         </apex:column>

         <apex:column headerValue="Book price" >

           <apex:outputtext value="{!bk.Price__c}"/>

         </apex:column>

       </apex:pageblocktable>

    </apex:pageblock>

    <apex:outputpanel id="op">

     <apex:outputpanel styleClass="poupBlog" layout="block" rendered="{!displayPopUp}" />

     <apex:outputpanel styleClass="puoup" layout="block" rendered="{!displayPopUp}">

     <apex:pageBlock >

        <apex:panelgrid >

          Book Name   <apex:inputtext value="{!BName}"/>

          Book Author <apex:inputtext value="{!BAuthor}"/>

          Book price  <apex:inputtext value="{!BPrice}"/>

        </apex:panelgrid>

        <apex:commandButton value="Cancel" action="{!cancel}" reRender="op,pb,pbt,sl"/>

        <apex:commandButton value="update" action="{!upRec}" reRender="op,pb,pbt,sl"/>

         <apex:commandButton value="Delete" action="{!Deletez}" reRender="op,pb,pbt,sl"/>

     </apex:pageBlock>

    </apex:outputpanel> 

    </apex:outputpanel>

  </apex:form>

</apex:page>

==========CONTROLLER=============

public with sharing class Pouup {

    public PageReference Deletez() {
            displayPopUp=false;
            Book = [SELECT Id,Name,price__c,Author__c FROM Book__c where id =: bks];
            book.Name = bname;
            book.Price__c = bprice;
            book.Author__c =bAuthor;
            try{
                 delete book;
                 apexPages.addMessage(new ApexPages.message(ApexPages.severity.Error,'.Sorry!.......'));
   
           }
           catch(Exception e){
                 apexPages.addMessage(new ApexPages.message(ApexPages.severity.Error,'.Sorry!.......'));
           }
           return null;
    }


    public PageReference cancel() {
        displayPopUp=false;
        return null;
    }


    public PageReference upRec() {
         Book = [SELECT Id,Name,price__c,Author__c FROM Book__c where id =: bks];
            book.Name = bname;
            book.Price__c = bprice;
            book.Author__c =bAuthor;
            try{
                 update book;
                 displayPopUp=false;
   
           }
           catch(Exception e){
                 apexPages.addMessage(new ApexPages.message(ApexPages.severity.Error,'.Sorry!.......'));
           }
        return null;
    }


    public Decimal BPrice { get; set; }

    public String BAuthor { get; set; }

    public String BName { get; set; }

    public boolean displayPopUp { get; set; }

    public PageReference del() {
        return null;
    }


    public String AllBks {  set; }
    public List<Book__c> getAllBks(){
       List<Book__c> abs=[select id,name,author__c,price__c from book__c ];
       return abs;
    }

    public PageReference puouup() {
            displayPopUp=true;
            Book = [SELECT Id,Name,price__c,Author__c FROM Book__c where id =: bks];
            bname= book.Name ;
            bprice=book.Price__c ;
            bAuthor=book.Author__c;
        return null;
    }

    book__c book;
    list<book__c> book1;
    public String bklist {  set; }

    public String bks { get; set; }
    public list<selectoption> getbklist(){
        List<selectOption> bks= new List<selectOption>();
        bks.add(new selectOption('<---None-->','<--None-->'));
        for(BOok__c Bl:[select id,name from Book__c]){
           bks.add(new selectOption(bl.id,bl.name));
        }
        return bks;
    }
}