Anzeige Modal DIV über verdunkelte Seite

Ich habe eine Seite, wo Benutzer ein Formular ausfüllen. Mehrere Textfelder, Dropdownlisten und Kontrollkästchen usw.Anzeige Modal DIV über verdunkelte Seite

Wenn der Benutzer auf ein bestimmtes Textfeld innerhalb der Seite klickt, muss ich den Bildschirm verdunkeln und einen Dialog mit einer Liste von Kontrollkästchen und OK und Abbrechen-Schaltflächen öffnen. Wenn der Benutzer auf OK klickt, werden die Textwerte aus den aktivierten Kontrollkästchen übernommen, das Popup wird geschlossen, die Hauptseite wird wieder heller und der Kontrollkästchentext wird in das Textfeld, auf das geklickt wurde, im kommagetrennten Zeichenfolgenformat geschrieben.

Das größte Problem, das ich habe, ist mit dem modalen Popup-Div-Code. Ich bin mir sicher, dass ich die Checkbox/Textbox-Funktion gut verstehen kann, aber ich konnte das Popup nicht richtig funktionieren.

Hat jemand eine einfache Möglichkeit, dies zu tun? Momentan, bevor ich damit angefangen habe, habe ich nur ein einfaches Formular mit allen Eingabesteuerelementen.

Quelle

2013-03-27 Mark Highfield

Verwenden Sie jQuery UI ? –

Ja, ich verwende JQuery in diesem Projekt. –

[jQuery UI] (http://jqueryui.com) ist eine Bibliothek über jQuery. Nicht sicher, ob du das meinst oder nicht. Es hat einen modalen Dialog. Veröffentlichen Sie den Code, den Sie haben, auch wenn es nicht funktioniert, wenn Sie möchten, dass die Leute helfen. –

Verwenden Sie das Dialog Modal als here gezeigt:

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Dialog - Modal confirmation</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
$("#dialog-confirm").dialog({ 
    resizable: false, 
    height:140, 
    modal: true, 
    buttons: { 
    "Delete all items": function() { 
     $(this).dialog("close"); 
    }, 
    Cancel: function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 
}); 
</script> 
</head> 
<body> 

<div id="dialog-confirm" title="Empty the recycle bin?"> 
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">  
</span>These items will be permanently deleted and cannot be recovered. Are you sure? </p> 
</div> 

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 


</body> 
</html>

Quelle

2013-03-27 14:55:18

Danke, das hat super funktioniert! Nun, wie kann ich die "OK" -Schaltfläche setzen, um Daten in das Textfeld zu schreiben, das geklickt wurde, basierend auf dem Checkbox-Text? –

Wie dieser http://jsfiddle.net/Cyberjetx/QGuz8/ Teil der Antwort kam von http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery –

Der einfachste Weg dazu ist die Verwendung von jQuery UI. Es hat eine "Dialog" -Schnittstelle, die ziemlich praktisch und einfach zu implementieren ist.

Wenn auf der anderen Seite Sie lieber würde es von Hand zu tun, dann ist das eine andere Geschichte:

ein DIV erstellen, die es nur eine schwarze feste Box (position: fixed), dass die Abdeckung würde Seite. Dies wird dein Hintergrund sein. Stellen Sie sicher, dass es zuerst nicht sichtbar ist (Anzeige einstellen: keine)
Machen Sie einen weiteren festen DIV, der Ihren Dialog anzeigen würde. Stylen Sie es so, dass Ihr Dialog in der Mitte Ihres Browserfensters angezeigt wird.
Verwenden Sie Javascript (oder jQuery für zusätzliche Effekte), um sowohl Ihren schwarzen DIV als auch den Dialog DIV anzuzeigen, wenn Sie auf die Schaltfläche klicken.

Quelle

2013-03-27 14:48:42 Savv

Gefällt mir dies http: // jsfiddle.net/8Es24/ –

das sieht wirklich gut aus – Savv

Sie wollen nicht die ganze jQuery UI-Bibliothek nur für diesen Zweck hinzuzufügen. Wenn ich hier bin, wie würdest du es machen?

Wenn Sie also diese Eingabe "fokussieren" - nennen wir sie "opensModal" - möchten Sie, dass sich das Modal öffnet. Es ist ziemlich einfach und selbsterklärend - trotz des "langen" Codes. Eigentlich ist das meiste nur dazu da, den modalen/modalen Auftritt schöner zu machen. Los geht's:

HTML:

<!-- the input --> 
<input class="opensModal" type="text" /> 

<!-- the modal and its overlay --> 
<div class="modalOverlay is-inactive"> 
    <div class="modal"> 
     <input type="checkbox" /> 
     <input type="checkbox" /> 
     <button>Ok</button> 
     <button>Cancel</button> 
    </div> 
</div>

CSS:

.modalOverlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    -webkit-transition: 0.6s; 
} 

.modalOverlay.is-inactive { 
    visibility: hidden; 
    background: rgba(0, 0, 0, 0); 
} 

.modalOverlay.is-active { 
    visibility: visible; 
    background: rgba(0, 0, 0, 0.4); 
} 

.modal { 
    margin: 100px auto; 
    background: #fff; 
    width: 100px; 
    padding: 20px; 
    -webkit-transition: 0.4s 0.6s; 
} 

.modalOverlay.is-inactive .modal { 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transform: scale(0.1); 
} 

.modalOverlay.is-active .modal { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transform: scale(1); 
}

JQUERY (Javascript)

(function() { 
    var $modal = $('.modalOverlay'), 
     openModal = function() { 
      $modal 
       .removeClass('is-inactive') 
       .addClass('is-active'); 
     }, 
     closeModal = function() { //use it wherever you want 
      $modal 
       .removeClass('is-active') 
       .addClass('is-inactive'); 
     }, 
     onDocReady = function() { 
      $('.opensModal').on('focus', openModal); 
     }; 

    $(onDocReady); 
})();

Hier ist eine Geige: http://jsfiddle.net/2edPZ/3/

Quelle

2013-03-27 14:55:53 banzomaikaka

Anzeige Modal DIV über verdunkelte Seite

Antwort

Verwandte Themen