How do I create a floating html window?

Question

I need a window with table content that opens when I click on a link and has a close button.

Answer 1

Here is an example: http://jsfiddle.net/a33p4wy3/

The jQuery modal already has a close button by default. If you want to make your own you need to invoke the method $('#dialog').dialog('close');. So any code or event receiver 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();
        }
    });
});

Answer 2

When I need to do what you need I use one <div> styled 'display:none' as standard 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, position a small button in some part of this div with 'x' or the text 'close', after having prepared all the layout of this box that will stay floating 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 the button that will be clicked to open the box (idDoBotao), in the ID of the button that will close the box (idDoBotaoFechar) and in the <div> (idDaDiv), 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 rode here but the box is not floating, what?? Simple, what makes the box floating is the CSS, simply put:

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

This will cause your box to stay floating 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 I used are those compatible with the current versions of the library, if you have 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 this same idea of yours, but instead of showing 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 on the left side, when he touches the top again he hides the box, check out: www.imageriacriativa.com.br

---

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

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

Using the same jQuery code explained earlier, it is possible to place the action on any HTML object as long as it has the id="" of the action defined in jQuery. Remember to exchange Ids 'idDoBotao' and 'idDoBotaoFechar' by the ID’s of your choice.

Hope I helped, hugs...

Answer 3

If you don’t 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>
<button id="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>