jquery: comment puis-je créer une simple superposition?

Question

comment puis-je créer une véritable base de superposition en jquery sans INTERFACE utilisateur ?

ce qui est un léger plugin ?

Answer 1

Une superposition est, tout simplement, un div qui reste fixe sur l'écran (peu importe si vous faites défiler) et a une sorte d'opacité.

Ce sera vous CSS. Dire la superposition a .5 opacité (de la croix-navigateur).

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

Ce sera votre jQuery (aucune INTERFACE utilisateur n'est nécessaire). Vous êtes juste allons créer un nouvel élément avec l'ID #superposition. La création et la destruction de la DIV doit être tout ce dont vous avez besoin.

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)

Pour des raisons de performances , vous pourriez voulez avoir un DIV caché et réglage de l'affichage à bloc, et aucun que vous en avez besoin ou pas.

Espérons que cela aide!

Edit: @Vitaly si bien dit, assurez-vous de vérifier votre DocType. Lire plus de commentaires sur les résultats de ses recherches..

Answer 2

Voici un simple javascript seule solution

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.5)",
        "z-index": 10000,
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "30px",
        "font-weight": "bold",
        "cursor": "wait"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

Démo:

http://jsfiddle.net/UziTech/9g0pko97/

Résumé:

https://gist.github.com/UziTech/7edcaef02afa9734e8f2

Answer 3

essayez facebox ou fancybox

Answer 4

jqModal a toujours été mon préféré de la lumière-poids de la superposition de plugin.

Answer 5

Si vous êtes déjà à l'aide de jquery, je ne vois pas pourquoi il ne serait pas également être en mesure d'utiliser un léger superposition de plugin. D'autres personnes ont déjà écrit quelques belles dans jquery, alors pourquoi réinventer la roue?