Jak wygenerować proste wyskakujące okienko za pomocą jQuery
217
Projektuję stronę internetową. Kiedy klikamy treść o nazwie div div, jak mogę wyświetlić wyskakujące okienko zawierające e-mail z etykietą i pole tekstowe?
Uważam, że ta odpowiedź jest bardzo przydatna w przypadku szybkich alertów bez dotykania istniejącego kodu HTML lub CSS. Tworzy i pokazuje div używając jQuery z js.
W zależności od sytuacji możesz załadować zawartość wyskakującego okienka za pomocą wywołania ajax. Najlepiej tego unikać, jeśli to możliwe, ponieważ może to dać użytkownikowi większe opóźnienie przed obejrzeniem treści. Oto kilka zmian, które będziesz chciał wprowadzić, jeśli zastosujesz to podejście.
Działa, dziękuję. Ale zamierzam dołączyć kolejny rejestr połączeń z przyciskami. po kliknięciu formularz rejestracyjny powinien się wyskoczyć. W tym celu zawarłem tę samą funkcję i zmieniłem nazwę identyfikatorów i klas. Problem polega na tym, że kiedy kliknę przycisk zamykania formularza rejestracyjnego, przełącza on formularz kontaktowy. Potrzebujesz pomocy @jason Davis
Rajasekar
1
aby usunąć HTML, który dodajesz przy zamykaniu, zmień metodę zamykania na $ („. zamknij”). live („kliknij”, function () {$ („. pop”). slideFadeToggle (); $ („# contact”) .removeClass („selected”); $ („. pop”). remove (); // dodaj to ... zwróć false;}); poprawi to problem, który pojawi się, gdy klikniesz link więcej niż jeden raz przed zamknięciem wyskakującego okienka. przy okazji fajna odpowiedź, zręczna i prosta ...
Jonx
10
@yahelc Spróbuj kliknąć kilkakrotnie „Zarejestruj się”, a następnie kliknij „Anuluj”. Ooooooooo
AVProgrammer
Nie do końca zgadzam się z częścią „świetny kod”. Wiele treści jest zapisanych na stałe w javascript. Tak, wszyscy mamy tam javascript w naszych przeglądarkach, ale po prostu nie jest to właściwy sposób na tworzenie stron internetowych. HTML jest dla treści, js dla „makijażu”. Odpowiedź Karim79 jest lepsza z mojej perspektywy. Uwzględnij swój znacznik w kodzie HTML, gdzie należy, ukryj go, po prostu pokaż go i wyświetl jako wyskakujące okienko. Znacznie czystsze rozwiązanie niż drukowanie dużej ilości HTML bezpośrednio z javascript. Nie musisz używać jQueryUI, jeśli go nie potrzebujesz, istnieje milion sposobów na umieszczenie zawartości w wyskakującym
okienku
12
Według strony internetowej jQuery , od jQuery 1.7 metoda .live () jest przestarzała. Użyj .on (), aby dołączyć moduły obsługi zdarzeń. Użytkownicy starszych wersji jQuery powinni używać .delegate () zamiast .live (). . Więc wymieniłem .live z .Na . Kliknij tutaj, aby zobaczyć bardziej ogólną wersję kodu Andy'ego . Użyłem również łącza CDN do nowszej wersji jQuery na rzeczywistej stronie<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
Gotowe!
Pamiętaj, że chodzi o najprostszy dostępny przypadek użycia. Sugeruję przeczytanie dokumentacji, aby uzyskać lepszy pomysł na to, co można z tym zrobić.
Inne niż Jquery, czy muszę dołączyć jakąkolwiek wtyczkę? @Karim
Rajasekar,
8
@Rajasekar - Musisz pobrać pakiet interfejsu użytkownika jQuery i co najmniej zawierać pliki ui.core.js i ui.dialog.js, aby uzyskać Dialog. Jeśli chcesz, aby okno dialogowe można było przeciągać i / lub zmieniać rozmiar, musisz dołączyć pliki ui.draggable.js i ui.resizable.js.
Jest lekki, obsługuje zagnieżdżone wyskakujące okienka, zorientowany obiektowo, obsługuje dynamiczne przyciski, reaguje i wiele więcej. Następna aktualizacja będzie zawierać formularze Popup Ajax itp.
Proste okno wyskakujące przy użyciu HTML5 i javascript.
html: -
<dialog id="window"><h3>SampleDialog!</h3><p>Lorem ipsum dolor sit amet</p><button id="exit">CloseDialog</button></dialog><button id="show">ShowDialog</button>
Dostaję TypeError: dialog.show is not a functionbłąd. Czy możesz podać JSFiddle?
Magiranu,
0
Oto bardzo proste wyskakujące okienko:
<!DOCTYPE html><html><head><style>#modal {
position:absolute;
background:gray;
padding:8px;}#content {
background:white;
padding:20px;}#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>var modal =(function(){// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();});// Open the modalreturnfunction(content){
$content.html(content);// Center the modal in the viewport
$modal.css({
top:($(window).height()- $modal.outerHeight())/2,
left:($(window).width()- $modal.outerWidth())/2});
$modal.show();};}());// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();});});</script></head><body><a id='popup' href='#'>Simple popup</a></body></html>
Odpowiedzi:
Najpierw CSS - dostosuj to, jak chcesz:
I JavaScript:
I na koniec HTML:
Oto demo i implementacja jsfiddle.
W zależności od sytuacji możesz załadować zawartość wyskakującego okienka za pomocą wywołania ajax. Najlepiej tego unikać, jeśli to możliwe, ponieważ może to dać użytkownikowi większe opóźnienie przed obejrzeniem treści. Oto kilka zmian, które będziesz chciał wprowadzić, jeśli zastosujesz to podejście.
HTML staje się:
A ogólną ideą JavaScript jest:
źródło
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
Sprawdź okno dialogowe jQuery UI . Użyłbyś tego w ten sposób:
JQuery:
Znaczniki:
Gotowe!
Pamiętaj, że chodzi o najprostszy dostępny przypadek użycia. Sugeruję przeczytanie dokumentacji, aby uzyskać lepszy pomysł na to, co można z tym zrobić.
źródło
Używam jQuery plugin o nazwie ColorBox , to
źródło
Wypróbuj Magnific Popup , jest responsywny i waży około 3 KB.
źródło
Odwiedź ten adres URL
Demonstracje okna dialogowego interfejsu użytkownika Jquery
źródło
Myślę, że to świetny samouczek na temat pisania prostego wyskakującego okienka. Plus wygląda bardzo pięknie
źródło
Oto dobry, prosty przykład tego, tutaj: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
źródło
Niezwykle lekka modalna wtyczka popup. POPELT - http://welbour.com/labs/popelt/
Jest lekki, obsługuje zagnieżdżone wyskakujące okienka, zorientowany obiektowo, obsługuje dynamiczne przyciski, reaguje i wiele więcej. Następna aktualizacja będzie zawierać formularze Popup Ajax itp.
Zapraszam do korzystania i tweetowania opinii.
źródło
Proste okno wyskakujące przy użyciu HTML5 i javascript.
html: -
JavaScript: -
źródło
TypeError: dialog.show is not a function
błąd. Czy możesz podać JSFiddle?Oto bardzo proste wyskakujące okienko:
Bardziej elastyczne rozwiązanie można znaleźć w tym samouczku: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Oto close.png dla próbki.
źródło
TYLKO LOGIKA POPUP CSS! SPRÓBUJ TO. ŁATWO! Myślę, że to może być hack popularne w przyszłości
źródło