<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="text" name="email" id="email" class="form-control" placeholder="Enter Email..."/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password..."/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="hidden" name="action" value="login">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Clear</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
I'm trying to show this modal automatically, with this javascript code:
<script>
$('#myModalLogin').modal({
show: true
})
</script>
But it seems not work, and i don't understand why.
ps: of course I have included javascript files bootstrap 3:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Any help and/or direction would be greatly appreciated. Thanks!
I do not see any issues with your code:
with code
$('#myModalLogin').modal({
show: true
})
without it it does not.
Check this: http://jsfiddle.net/usecide/99xKj/1/
Related
my contact us page, a pop up is meant to show and disappear when i send a message,but nothing happens. please help
the contact us page and pop up modal
<!-- The Contact Us Page -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 header"></div>
</div>
</div>
</div>
<div class="container card">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="cardStyle">
<form name="contact" id="form" data-toggle="validator">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">
Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="none" selected="" disabled>Choose One:</option>
<option value="general">General Customer Service</option>
<option value="collaborate">Collaborate with Us</option>
<option value="bug">Found a Bug/Issue</option>
<option value="other">Any other Queries</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
this is the pop up modal that is supposed to appear
<!-- Form submitted Thank You Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the JavaScript file
$(document).ready(function() {
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
$('#myModal').modal('hide');
} else {
// everything looks good!
$('#myModal').modal('show');
}
})
});
Since you try to show the modal only when preventDefault() has NOT been called, the form's default action will take place, which is to submit the form. This causes a page load and since you haven't specified an action attribute on the form, it will submit to the same page. In other words, the page just reloads.
If you don't want to cause a page reload, you have to always call preventDefault() and then submit the data with AJAX.
I'm building a website and tried to embed a form as a partial view inside a modal window. I succeeded in getting the form inside the modal, but it only appears on the left half of the modal body. Does anyone know a fix for this?
I never set the col-md-6 anywhere so there i no reason for it to appear this way. I even tried to exactly copy some modal examples from the internet that appeared to be correct, but i had the same problem.
Modal window that the form is loaded in:
<!-- Modal -->
<div id="addLeverancierModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Leverancier toevoegen</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button>
<button type="button" class="btn btn-success">Opslaan</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Modal form(partial view):
<form role="form">
<div class="form-group">
<label>Leveranciernummer</label>
<input type="email" class="form-control" id="leveranciernummerInput" placeholder="Leveranciernumer">
</div>
<div class="form-group">
<label>Naam</label>
<input class="form-control" id="leveranciernaamInput" placeholder="Naam">
</div>
<div class="form-group">
<label>Straatnaam</label>
<input class="form-control" id="straatnaamInput" placeholder="Straatnaam">
</div>
<div class="form-group">
<label>Huisnummer</label>
<input class="form-control" id="huisernummerInput" placeholder="Huisnummer">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" id="postcodeInput" placeholder="Postcode">
</div>
<div class="form-group">
<label>Plaatsnaam</label>
<input class="form-control" id="plaatsnaamInput" placeholder="Plaatsnaam">
</div>
<div class="form-group">
<label>Land</label>
<input class="form-control" id="landInput" placeholder="Land">
</div>
<div class="form-group">
<label>VAT</label>
<input class="form-control" id="vatInput" placeholder="VAT">
</div>
<div class="form-group">
<label>Telefoon</label>
<input class="form-control" id="telefoonInput" placeholder="Telefoon">
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" id="emailInput" placeholder="Email">
</div>
<div class="form-group">
<label>Email extra</label>
<input class="form-control" id="emailExtraInput" placeholder="Email extra">
</div>
</form>
JQuery to load form inside modal:
var GetLeverancierForm = function () {
$.ajax({
type: "GET",
url: baseURL + '/AddLeverancier',
success: function (data) {
$(".modal-body").html(data);
}
});
}
Base container all content is loaded in(all html files):
<div class="container body-content">
#RenderBody()
</div>
Picture of how the modal appears:
Design your form like this
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
It would look like this :
below is my modal i want this to open automatically once the song gets over in default audio player
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="myModalLabel">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" id="namea" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="txtEmail" placeholder="Email" <input type="text" />
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" id="mobile" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" id="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" id="password1" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="button" onclick="ValidateName();myFunction();ValidateNo();checkEmail();" class="btn btn-primary btn-sm" >
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
Facebook <a href="#" class="btn btn-danger">
Google +</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login And Register -->
<!-- Java scripts -->
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".pop").click(function () {
$("#myModal").modal();
});
});
</script>
Html5 audio player has events which will get triggered when the audio stops playing
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
Refer this page
It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ
I have put a login modal using bootstrap 3 as explained in the link
http://bootstrapvalidator.com/examples/modal/
In the JavaScript code how to set the username and password to a particular value for the login form.
I am still learning html and css. I don't know much about javascript.
$('input[name="username"]').val('user');
$('input[name="password"]').val('password')
http://jsfiddle.net/sp5fcaLm/
Although I'm not sure setting password directly is the best idea.
You can try:
HTML code:
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="username" id="username" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" id="password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
and javascript code:
$('#loginModal').on('shown.bs.modal', function() {
$('#username').val('example#gmail.com');
$('#password').val('123456');
});
Remember include twitter-bootstrap. Its here