call dialog box on button click using javascript

See more:

Javascript

How to call dialog box on button click.I call dialog box on button click which is display for 2 or 3 second only.
code is as follow

<script type="text/javascript">
            $(function()
            {
                //  Dialog
                $('#dialog').dialog({
                    autoOpen: false,
                    height: 200,
                    modal: true, // false
                    buttons:
                    {
                        "Ok": function()
                        {
                            $(this).dialog("close");
                        },
                        "Cancel": function()
                        {
                            $(this).dialog("close");
                        }
                    }
                });

                // Dialog Link
                $('#dialog_link').click(function()
                {
                    $('#dialog').dialog('open');
                    return false;
                });

                // Datepicker
                $('#datepicker').datepicker({
                    inline: true
                });
                // Slider
                $('#slider').slider({
                    range: true,
                    values: [17, 67]
                });
                // Progressbar
                $("#progressbar").progressbar({
                    value: 20
                });
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); },
                    function() { $(this).removeClass('ui-state-hover'); }
                );
            });
            function btnOk()
            {
                var str=document.getElementById('txtName').value;
                var name=document.getElementById('ddlName').value;
                window.location="Next.aspx?str="+str+"&name="+name;
            }
        function openDialog()
        {
            $("#dialog").dialog('open');
        }
        function openDialogAndBlock()
        {
            openDialog();
        }
        </script>

<form id="form1" runat="server">
        <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
        <h2 class="demoHeaders">Dialog</h2>
        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Ok</a></p>
        <table>
        <tr>
        <td>
            <asp:Label ID="lblUserName" runat="server" Text="Name"></asp:Label>
            </td>
            <td>
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
        </td>
        </tr>
        <tr>
        <td>
        <asp:Label ID="lblUserCountry" runat="server" Text="Country"></asp:Label>
        </td>
        <td>
        <asp:DropDownList ID="ddlUserCountry" runat="server">
            <asp:ListItem>India</asp:ListItem>
            <asp:ListItem>China</asp:ListItem>
            <asp:ListItem>ShriLanka</asp:ListItem>
            <asp:ListItem>Austrelia</asp:ListItem>
        </asp:DropDownList>
        </td>
        </tr>
        <tr>
        <td>
            <asp:LinkButton ID="lnkBtnShow" runat="server" OnClientClick="openDialogAndBlock()" onclick="lnkBtnShow_Click">show</asp:LinkButton>
            <%--<asp:Button ID="btnShow" runat="server" Text="show" onclick="btnShow_Click1" OnClientClick="openDialogAndBlock()"/>--%>
        </td>
        </tr>
        </table>
        <%--<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Show</a></p>--%>
        <!-- ui-dialog -->
        <div id="dialog" title="Dialog Title">
        <table>
        <tr>
        <td>
            <asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label>
            </td>
            <td>
            <%--<input type="text" id="txtName" runat="server" />--%>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </td>
            </tr>
            <tr>
            <td>
            <asp:Label ID="lblCountry" runat="server" Text="Country"></asp:Label>
            </td>
            <td>
            <asp:DropDownList ID="ddlName" runat="server">
            <asp:ListItem>India</asp:ListItem>
            <asp:ListItem>China</asp:ListItem>
            <asp:ListItem>ShriLanka</asp:ListItem>
            <asp:ListItem>Austrelia</asp:ListItem>
        </asp:DropDownList><br />
        </td>
        </tr>
        <tr>
        <td>
        <input type="button" id="btnOk" value="Display" runat="server" onclick="btnOk()"/>
        </td>
        </tr>
        </table>
        </div>
    </form>

what is wrong with this code.Thanks