How to add a border less poopup in an asp.net or SharePoint Page.

It is quite tedious to add popup in your page without any border. And more than that if you have to transfer a lot of information. Sometimes we need to add a new Page in our project just for adding a very simple popup which contains a text box only. However putting all theses you can not get rid of windows default close and minimize button. So I have done this through putting a div and then setting its z-index style. Through which It will look like a popup.

Here are the steps to integrate this solution into your page.

Code need to put into .aspx or .ascx file :-

Code to put add a panel and controls : 

 <asp:Panel runat="server" ID="pnlPopupContainer" CssClass="positionSetter">
        <table width="100%">
            <tr style="width: 100%">
                <td style="text-align: left; vertical-align: middle; width: 300px; padding-left: 10px;">
                    <asp:TextBox runat="server" ID="txtBox1" Width="275px"></asp:TextBox>
                </td>
                <td style="vertical-align: middle; width: 300px;">
                    <asp:LinkButton runat="server" Text="Save Search" ID="lnkBtn1"                                  OnClientClick="HideMainPanel()" OnClick="lnkBtn1_Click"></asp:LinkButton>
                </td>
            </tr>
        </table>
    </asp:Panel>

 This is the link on which click popup will be opened. It can be a button or anything you want.
<a href='#' onclick='ShowPanel()'><b>Open Popup </b></a>

 Styles :  

      .positionSetter       
      {
            position: absolute;
            left: 275px;
            top: 425px;
            width: 400px !important;
            height: 35px !important;
            text-align: center;
            z-index: 1000;
            background-color: #4f81bc !important;
            visibility: hidden;
        }
This style class will play a very crucial role in its positioning.  Left and top attribute will set its horizontal position in page, z-index will position its over page and give a popup feel, width and height will decide popup width and height. 

JavaScript :
This java script functions will show and hide of our div(popup).

function HideMainPanel() {
            el = document.getElementById('<%=pnlPopupContainer.ClientID%>');
            if (el != null) {
                el.style.visibility = "hidden";
            }
        }

        function ShowPanel() {
            el = document.getElementById('<%=pnlPopupContainer.ClientID%>');
            if (el != null) {
                el.style.visibility = "visible";
            }

        }

Through this code you can view it in this way.

And you can customize it as per your requirement further.