Pokaż pole alertu ładowania początkowego kliknij przycisk

Następujący kod bezpośrednio wyświetla okno alertu.Pokaż pole alertu ładowania początkowego kliknij przycisk

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

</head> 

<body> 
    <div class="container"> 
     <h2>Dismissal Alert Messages</h2> 
     <div class="alert alert-success alert-dismissable"> 
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
      Success! message sent successfully. 
     </div> 

    </div> 
</body>

chcę pokazać powiadomienie pole na kliknięcia przycisku może ktoś pomoże mi to zrobić?

Źródło

2015-05-05 Neo

Ten jsfiddle pokazuje w jaki sposób można wyświetlić okno alertu startowej na kliknięcia

http://jsfiddle.net/g1rnnr8r/2/

Trzeba wdrożyć show() metody jQuery. Kod, którego potrzebujesz, to.

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('.alert').show() 
    }) 
});

Źródło

2015-05-05 10:47:29

kiedy użyłem go po raz drugi to nie jest działa :(działa tylko po odświeżeniu strony – Neo

ah ok, pozwól mi naprawić, że @Neo. możesz potwierdzić, że za każdym razem, gdy klikniesz przycisk, chcesz, aby pojawiło się nowe okno z ostrzeżeniem –

tak, faktycznie użyję go i wygeneruję alarmy dynamicznie. na sukces i porażkę Pokażę komunikat ostrzegawczy – Neo

Jeśli chcesz utworzyć niestandardowe okno dialogowe modalne, a następnie można użyć tego małą bibliotekę do niej: http://bootboxjs.com/

<!-- bootbox code --> 
    <script src="bootbox.min.js"></script> 
    <script> 
     $(document).on("click", ".alert", function(e) { 
      bootbox.alert("Hello world!", function() { 
       console.log("Alert Callback"); 
      }); 
     }); 
    </script>

W przeciwnym razie trzeba utworzyć modalne i wyzwala javascript ręcznie.

Źródło

2015-05-05 10:43:12 Pekka

niestandardowe, ale korzystając z powyższego kodu, możesz mi pomóc go zmodyfikować? – Neo

Spróbuj tego. Co tutaj jest zrobione to:

Dodano jeden przycisk "Pokaż wiadomość ostrzegawczą".
Domyślnie komunikat ostrzegawczy będzie ukryty.
Na kliknięciem "Pokaż komunikatu ostrzegawczego" komunikat ostrzegawczy zostanie pokazany

$("#btnShow").click(function(){ 
 
    
 
    $(".alert").hide().show('medium'); 
 
});

.alert{ 
 
    display:none; 
 
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
     
 
     <h2>Dismissal Alert Messages</h2> 
 
     
 
     <button id="btnShow">Show Alert message</button> 
 
     <div class="alert alert-success alert-dismissable"> 
 
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
 
      Success! message sent successfully. 
 
     </div> 
 

 
    </div> 
 
</body>

Źródło

2015-05-05 10:46:05 Puneet

kiedy kliknąłem przycisk drugi raz to nie działa :(działa tylko po odświeżeniu strony – Neo

@Neo - spróbuj teraz, – Puneet

miło, podoba mi się to rozwiązanie @Puneet –

function showAlert(){ 
 
    if($("#myAlert").find("div#myAlert2").length==0){ 
 
    $("#myAlert").append("<div class='alert alert-success alert-dismissable' id='myAlert2'> <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> Success! message sent successfully.</div>"); 
 
    } 
 
    $("#myAlert").css("display", ""); 
 
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<button value="showAlert" onclick="showAlert();"> Show Alert</button> 
 

 
    <div class="container" style="display:none;" id="myAlert"> 
 
     <h2>Dismissal Alert Messages</h2> 
 
     <div class="alert alert-success alert-dismissable" id="myAlert2"> 
 
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
 
      Success! message sent successfully. 
 
     </div> 
 

 
    </div>

Zmieniano

Dodałem kilka identyfikatorów i napisałem jakiś kod. Spróbuj zrozumieć, jeśli nie pytasz mnie o to. Okay Mam nadzieję, że to ci pomoże, jeśli nie zapytaj mnie o więcej.

Źródło

2015-05-05 10:46:20

kiedy kliknąłem przycisk drugi czas to nie działa :(działa tylko po odświeżeniu strony – Neo

Zaktualizowałem, sprawdź teraz, czy alert przyjdzie, drugi raz, trzeci raz ... cały czas.Oczywiście –

Pokaż pole alertu ładowania początkowego kliknij przycisk

Odpowiedz

Powiązane problemy