Wyświetl modalne DIV na zaciemnionej stronie

Mam stronę, na której użytkownicy wypełniają formularz. Wiele pól tekstowych, rozwijanych i pól wyboru, itp.Wyświetl modalne DIV na zaciemnionej stronie

Po kliknięciu przez użytkownika określonego pola tekstowego na stronie, należy przyciemnić ekran i wyświetlić okno dialogowe z listą pól wyboru oraz przyciskami OK i Anuluj. Gdy użytkownik kliknie przycisk OK, pobierze wartości tekstowe z zaznaczonych pól wyboru, zamknie wyskakujące okienko, rozjaśni ponownie stronę główną i napisze tekst w polu wyboru do klikniętego pola tekstowego w formacie ciągu przecinkami.

Największym problemem, jaki mam, jest modalny kod div wyskakującego okienka. Jestem pewien, że mogę dobrze sprawdzić działanie pola wyboru/pola tekstowego, ale nie udało mi się poprawnie uruchomić wyskakującego okienka.

Czy ktoś ma prosty sposób na zrobienie tego? Obecnie, zanim zacząłem się z tym bawić, po prostu mam prosty formularz z wszystkimi kontrolkami.

Źródło

2013-03-27 Mark Highfield

Używasz jQuery UI ? –

Tak, używam JQuery w tym projekcie. –

[jQuery UI] (http://jqueryui.com) to biblioteka na szczycie jQuery. Nie jestem pewien, czy to właśnie miałeś na myśli, czy nie. Ma modalne okno dialogowe. Opublikuj kod, który masz, nawet jeśli nie działa, jeśli chcesz, aby ludzie Ci pomogli. –

Użyj modalne okno dialogowe, jak pokazano here:

<!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>

Źródło

2013-03-27 14:55:18

Dzięki, działało świetnie! Jak mogę teraz ustawić przycisk "OK", aby zapisywać dane w klikniętym polu tekstowym, na podstawie zaznaczonego pola wyboru? –

Podobnie jak http://jsfiddle.net/Cyberjetx/QGuz8/ część odpowiedzi pochodzi z http://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jquery –

Najprostszym sposobem na to jest użycie interfejsu jQuery. Ma interfejs "Dialog", który jest bardzo poręczny i łatwy do wdrożenia.

Jeżeli natomiast wolisz robić to ręcznie, a potem to już zupełnie inna historia:

Tworzenie DIV że to tylko czarny stałe box (position: fixed), który obejmowałby strona. To będzie twoje tło. Upewnij się, że nie jest on widoczny na początku (wyświetlanie zestawu: brak).
Utwórz kolejny stały DIV, który wyświetli okno dialogowe. Zmień to ustawienie, aby okno dialogowe było wyświetlane w środku okna przeglądarki.
Użycie Javascript (lub jQuery dla dodatkowych efektów) powoduje, że po kliknięciu przycisku pojawi się czarny DIV i okno dialogowe DIV.

Źródło

2013-03-27 14:48:42 Savv

Podobnie jak w tym http: // jsfiddle.net/8Es24/ –

, który wygląda naprawdę dobrze – Savv

Możesz nie chcieć, aby dodać całą bibliotekę jQuery UI tylko do tego celu. Jeśli mam rację, to jak byś to zrobił.

Tak więc, gdy "skupisz" to wejście - możesz nazwać je "opensModal" - chcesz otworzyć modal. Jest to całkiem proste i zrozumiałe - pomimo "długiego" kodu. W rzeczywistości większość jest po to, aby wygląd modalny/modalny był ładniejszy. Zaczynamy:

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); 
})();

Oto skrzypce: http://jsfiddle.net/2edPZ/3/

Źródło

2013-03-27 14:55:53 banzomaikaka

Wyświetl modalne DIV na zaciemnionej stronie

Odpowiedz

Powiązane problemy