javascript onclick créer(élément) div viz boîte de pop-up

Je suis en train de faire un pop up box, qui est appelé en cliquant sur un bouton, c'est ce que j'ai obtenu jusqu'à présent.. http://jsfiddle.net/WGPhG/2/

  • Si l'une des réponses ci-dessous a répondu à votre question, merci de l'accepter. Merci!
InformationsquelleAutor raj_n | 2012-07-18
  1. 9

    Ici est un violon qui ne fait ce que vous voulez - http://jsfiddle.net/WGPhG/6/

    JS

    function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.innerHTML = 'close';
    cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
    var message = document.createElement('span');
    message.innerHTML = "This is a test message";
    popup.appendChild(message);                                    
    popup.appendChild(cancel);
    document.body.appendChild(popup);
}

    NOTES

    À l'ensemble de la classe sur un élément que vous utilisez l'élément.className au lieu de element.class.
    Pour le gestionnaire d'événements onclick sur le bouton cancel élément, il est préférable d'affecter directement le gestionnaire onclick avec une fonction anonyme qui fait ce que vous avez besoin, comme dans mon exemple ci-dessus.

    MODIFIER (Plus Efficace)

    C'est en fait un beaucoup mieux obtenir les résultats que vous voulez, car il n'y a pas de frais généraux inhérents à recréer les éléments à chaque fois le popup est affiché. Violon - http://jsfiddle.net/WGPhG/7/

    CSS

    .popup
{
    position:absolute;
    top:0px;
    left:0px;
    margin:100px auto;
    width:200px;
    height:150px;
    font-family:verdana;
    font-size:13px;
    padding:10px;
    background-color:rgb(240,240,240);
    border:2px solid grey;
    z-index:100000000000000000;
    display:none
}

.cancel
{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}

    HTML

    <button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    This is a test message
    <div class="cancel" onclick="closePopup();"></div>
</div>

    JS

    function openPopup() {
    document.getElementById('test').style.display = 'block';
}

function closePopup() {
    document.getElementById('test').style.display = 'none';
}
    InformationsquelleAutor tjscience
  2. 1

    Essayer cette mise à jour sur JSFiddle

    Changé :

    1. Au centre de la page (fixe).
    2. effet (fadein et fadeout)

    HTML

    <button onClick="openPopup();">click here</button>
<div id="test" class="popup" style="display:none;">
    This is a test message
    <div class="cancel" onclick="closePopup();"></div>
</div>

    CSS

    .popup {
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;  
    margin:auto;
    width:200px;
    height:150px;
    font-family:verdana;
    font-size:13px;
    padding:10px;
    background-color:rgb(240,240,240);
    border:2px solid grey;
    z-index:100000000000000000;
}

.cancel {
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}

.cancel:hover {
    background:rgb(255,50,50);
}

    JS

    function openPopup() {
    //document.getElementById('test').style.display = 'block';
   $('#test').fadeIn(1000);
}

function closePopup() {
    //document.getElementById('test').style.display = 'none';
    $('#test').fadeOut(500);
}
    InformationsquelleAutor Smith Foto
  3. 0

    Essayer Cette

    function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.setAttribute('onClick', 'document.getElementById("test").parentNode.removeChild('+popup +');')

    popup.innerHTML = "This is a test message";
    document.body.appendChild(popup);
    popup.appendChild(cancel);
 }
    • Dans votre cliquez sur gestionnaire de code ci-dessus, vous n'avez pas besoin de re-chercher les popup élément qu'il existe déjà une référence dans le champ d'application.
    InformationsquelleAutor Yograj Gupta
  4. 0

    J'ai mis à jour votre Violon et de le faire fonctionner.

    Le changement de code HTML...

     <button id="popupButton">click here</button>

    Mis À Jour JavaScript...

    document.onreadystatechange = function () {
    function popUp() {
        var popup = document.createElement('div');
        popup.className = 'popup';
        popup.id = 'test';

        popup.innerHTML = "This is a test message";

        var cancel = document.createElement('div');
        cancel.className = 'cancel';
        cancel.onclick= function () { popup.destroy(); }
        popup.appendChild(cancel);

        document.body.appendChild(popup);
    }

    document.getElementById('popupButton').onclick = popUp;
}​

    Fait cette réponse à votre question ou est-il autre chose?

    Mise à jour Amélioré le code et le violon. Maintenant ouvrir et fermer les œuvres

    • Cela ne fonctionnera pas, sauf si vous avez enveloppé le code, document.getElementById ("popupButton').onclick = la fenêtre; dans une fonction qui est appelé après que le DOM est chargé.
    • Vous avez raison. JSFiddle gère cela pour vous, mais je l'ai ajouté à ma réponse de toute façon juste pour être complet. Merci pour votre commentaire!
    InformationsquelleAutor Split Your Infinity