How do I create a floating window in html?

Here is an example: link

The modal jQuery already has a button to close. If you want to make your own you need to invoke the $('#dialog').dialog('close'); method. So any code or event observer running this code closes the modal.

Code in my example:

jQuery('#open').click(function () {
    jQuery('#dialog').dialog('open');
});
jQuery('#close').click(function () {
    jQuery('#dialog').dialog('close');
});

jQuery(document).ready(function () {
    jQuery("#dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function () {
            jQuery('.ui-widget-overlay').remove();
        }
    });
});

When I need to do what you need I use a <div> with style 'display:none' as default and use jQuery to display and hide with animation to get more interesting.

Let's go to the details, inside this div you create all the content that will be displayed, tables, forms, texts and btns, place a small button in some part of that div with 'x' or the text 'close', after have prepared the whole layout of this box that will float on the screen (style position: fixed;) you will create the commands to display and hide, I will show the simplest effect of jQuery, put an ID on button that will be clicked to open the (idDoBotao) box, in the ID of the button that will close the (idDoBotaoClose) box and in the% (idDaDiv) strong>, with jQuery do the following:

// Para exibir o box flutuante
$('#idDoBotao').on('click',function(e){
     e.preventdefault();
     $('#idDaDiv').fadeIn();
     // Ou
     //$('#idDaDiv').show();
});

// Para ocultar o box flutuante
$('#idDoBotaoFechar').on('click',function(e){
     e.preventdefault();
     $('#idDaDiv').fadeOut();
     // Ou
     //$('#idDaDiv').hide();
});

Ah, blz chinnon, I mounted here but the box is not floating, so what? Simple, what makes the box stand floating is CSS, simply put:

.boxFlutuante {
    position: fixed;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin: -100px -100px 0 0;
} 

This will make your box float on the screen, centrally, if you do not want to center, remove the 'margin' and control the 'left' and 'top' to position the way you want.

It is necessary to have a basic knowledge of HTML, CSS and jQuery, the jQuery functions that I used are compatible with the current versions of the library, if in doubt about them read the documentation on the official website:

on(); 
fadeIn();
fadeOut();
show();
hide();
preventdefault();

I made a box of this floating on the following site, in that same idea of yours, but instead of displaying and hiding it with a button I calculate the scroll bar, when you scroll down the page to see the content it displays the fixed box of the left side, when he leans on the top again he hides the box, check out: www.imageriacriativa.com.br

Edited - 02/23/2015 How to put the action in a <div> tag?

Simple, type to open: <a> to close: <a id="idDoBotao" href="#" title="">Botão Fechar</a>

Using the same jQuery code explained above, you can place the action on any HTML object as long as it has the <a id="idDoBotaoFechar" href="#" title="">Botão Fechar</a> of action defined in jQuery. Remember to swap ID's 'idDoBotao' and 'idDoBotaoClose' for ID's of your choice.

I hope to have helped, hugs ...

If you do not want or can use a plugin as suggested by @Sergio, you can do the following:

var btAbrirModal = $("#btAbrirModal");
var modal = $("#modal");
var modalClose = $("#modal .modal-close");
var modalBackground = $("#modal .modal-bg");

btAbrirModal.click(function () {
    modal.fadeIn(500);
});

modalClose.click(function () {
    modal.fadeOut(500);
});

//Caso queira que o dialogo feche ao realizar um click fora dele.
//
//modalBackground.click(function () {
//    modal.fadeOut(500);
//});

.hide {
    display: none;
}

.modal-bg {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: gainsboro;
    opacity: 0.7;
}

.modal-content {
    position: fixed;
    margin: 0 auto;
    width: 200px;
    height: 100px;
    top: 50px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: white;
    box-shadow: 0px 0px 10px black;
    border-radius: 5px;
    padding: 5px;
}

.modal-close {
    font-size: 2rem;
    line-height: 1;
    position: absolute;
    top: 0px;
    right: 5px;
    font-weight: bold;
    cursor: pointer;
    color: #AAAAAA;
    font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="btAbrirModal">Abrir Modal</button>
<div id="modal" class="hide">
    <div class="modal-bg"></div>
    <div class="modal-content">
        <h3>Hello World</h3>
        <a class="modal-close">&#215;</a>
    </div>
</div>