CSS pure?

Je cherche une alternative à window.prompt (), window.confirm () et window.alert (). Il est nécessaire pour une application Web complexe où la fenêtre a une méthode onblur () et IE et Safari déclenchent incorrectement ce flou lors de la levée d'une invite (en fait, Safari se bloque et IE ignore l'invite car l'utilisateur n'a pas autorisé "Windows scripts") . Je peux désactiver temporairement la fenêtre. Bloem, mais le problème IE est plus grave et il n'y a pas de solution simple.

Je sais que cela peut être fait, j'espère simplement que quelqu'un peut avoir une bonne solution "hors de la boîte" (plus la lumière est meilleure) que je peux utiliser comme simple remplacement. Je préférerais JS pur à quelque chose avec les dépendances de yahoo / jquery mais je vais prendre ce que je peux obtenir.

J'aimerais vraiment une solution qui arrête l'exécution du script (comme la création d'une boucle sans fin), mais si je dois utiliser des rappels, je le ferai. Il n'est pas nécessaire d'être entraînable.

J'aimerais vraiment une solution qui arrête l'exécution du script

La seule autre solution synchrone en dehors de confirm / alert et l' prompt maintenant-effectivement-disparue est showModalDialog . Cela ouvre une fenêtre distincte qui peut contenir n'importe quel contrôle HTML que vous aimez.

Cependant, il s'agit d'une extension IE non standard. Firefox et Webkit l'ont également implémenté; Des derniers navigateurs de bureau, c'est tout simplement Opera maintenant. De toute évidence, le support de navigateur mobile et plus ancien est bien pire. En outre, comme c'est effectivement une fenêtre contextuelle, les navigateurs ne vous permettent pas de déclencher un modeDialog sans interaction directe avec un utilisateur, comme un clic.

Dans tous les cas, tout le monde déteste des messages synchrones (modaux) réels, qui gèlent le reste de l'interface utilisateur du navigateur jusqu'à ce qu'il soit répondu. Si c'est possible, la fenêtre pop-in divs (pseudo-modal) avec renvoi est absolument conviviale. Bien sûr, ce ne sera pas un remplacement de remplacement pour le code s'appuyant sur une invite synchrone.

Merci pour les réponses. Comme il semble que la plupart des réponses nécessitent un cadre, j'ai écrit ma propre solution. C'est extrêmement léger et simple et ne nécessite aucune dépendance que je n'ai pas encore. Ce n'est pas aussi générique ou réutilisable que les versions UI du cadre.

HTML

  <!-- CHANGE TITLE DIALOG --> <div id="change_title_dialog" class="hidden"> <p>Please name your new planner</p> <input name="title" type="text" value="#fw.planner.title#"> <div class="dialog_buttons"> <input id="cancel_change_title" type="button" name="cancel_change_title" value="cancel" onmousedown="this.form.elements.title.value=='#fw.planner.title#';hideLayer('change_title_dialog')"> <input id="confirm_change_title" type="button" name="confirm_change_title" value="ok" onmousedown="hideLayer('change_title_dialog');confirmTitleChange()"> </div> </div> <!-- CONFIRM DELETE DIALOG --> <div id="confirm_delete_dialog" class="hidden"> <p>Are you sure you want to delete this planner?</p> <div class="dialog_buttons"> <input id="cancel_delete" type="button" name="cancel_delete" value="cancel" onmousedown="hideLayer('confirm_delete_dialog')"> <input id="confirm_delete" type="button" name="confirm_delete" value="ok" onmousedown="confirmDelete()"> </div> </div> <!-- FORM ACTIONS --> <input type="button" name="delete" onmousedown="showLayer('confirm_delete_dialog')"> <input type="button" name="rename" onmousedown="showLayer('change_title_dialog')">

CSS

 #planner #change_title_dialog, #planner #confirm_delete_dialog { background-color: #eee; color: black; border: 1px solid black; padding: 25px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; width: 300px; } #planner .dialog_buttons { text-align: right; }