Getting bootstrap modal to show in jquery -
i've created form , goes through jquery validated. question once form has been submitted bootstraps modal popup confirmation message, far i've not been able that.
my html
<div class="newsletter_email"> <div id="newsletter_modal" class="modal fade" aria-hidden="true" aria-labelledby="mymodallabel" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content col-lg-12"> <div class="modal-header"> <button class="close" aria-label="close" data-dismiss="modal" type="button"> <h4 id="mymodallabel" class="modal-title">form</h4> <p>this header</p> </div> <div class="modal-body">this body</div> <div class="modal-footer"> <p>this footer</p> </div> </div> </div> </div> <input id="email" class="email has-error" type="text" placeholder="enter email address" name="email" style="border: medium none;"> <button class="submit" data-target="#newsletter_modal" data-toggle="modal" value=""> submit </button> <div class="error-success" style="display:none;"></div> </div> </div>
my js
$(".submit").on("click", function(e){ e.preventdefault(); $error = 0; $email = $.trim($("#email").val()); if(!isvalidemailaddress($email)){ $("#email").parents(".form-group:first").addclass("has-error"); $("#email").css({"border":"solid 1px red"}); $error = 1; } if($error == 1){ $(".newsletter_email .alert.alert-success").hide(); $(".newsletter_email .alert.alert-danger").fadein(500); return false; } var request = $.ajax({ type: 'post', url: "ajax/newslettersubscription.php", data: {email: $email}, datatype: 'json', encode: true }) .done(function(data){ if(data.message == 'success'){ $('.newsletter_email').trigger("reset"); $(".newsletter_email .alert.alert-danger").hide(); $("#email").css({"border":"none"}); // $(".newsletter_email .alert.alert-success").fadein(250); } }); return false; });
you need create modal first can read create bootstrap modal
if(data.message == 'success'){ $('.newsletter_email').trigger("reset"); $('#mymodal').modal('show'); //show modal when result success $(".newsletter_email .alert.alert-danger").hide(); $("#email").css({"border":"none"}); // $(".newsletter_email .alert.alert-success").fadein(250); }
Comments
Post a Comment