I want to build Modal Window with cookie to display only once . I follow this tutorial http://calebserna.com/bootstrap-modal-email-subscription-form/ but still not working ? can anyone tell me how to fix it ? thanks .
here my website.http://cloudsblack.com/modalwindow.html
here my code .
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="heading heading-v1 margin-bottom-10">
<h2><strong><span class="color-orange">Modal Window</strong></span></h2>
</div>
</div>
<div class="modal-body">
<a class="btn btn-link" data-dismiss="modal">Close</a>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#myModal’).modal(‘show’);
$.cookie(‘pop’, ’7′);
}
});
</script>
Hi I'm here to answer my own question , I found these code its work ! thanks .
<!-- Modal -->
<div class="modal fade" id="myModal" 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" id="myModalLabel">Subscription Form Demo</h4>
<p>This is Bootstrap Modal popup example.</p>
</div>
<div class="modal-body">
<!--End mc_embed_signup-->
<!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
<div class="form-group remove-bottom">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
</div>
</div>
</form>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer remove-top">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--============================================================= MODAL WINDOW END=================================================================-->
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bs-docs-sidebar').affix({
offset: {
top: 10
}
})
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
$(function($) {
$('#deleteCookie').click(function() {
$.cookie('pop', null);
window.location.reload();
});
});
</script>
Related
I want that if a user stays on my website for around 20 seconds, a modal asking for user's name and email address will be displayed. I have fetched id of the modal div and stored it in the function myFunction(). The main problem here is nothing gets displayed after 20 seconds.
Following is my code:-
<!-- Apart from window.onload, I have also mentioned the function with body onload-->
<body onload="myFunction" id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<script type="text/javascript">
window.setTimeout(function myFunction() {
document.getElementById("exampleModal");
},20000);
</script>
<!-- Modal code -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="MessageServlet" method="post">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" value="svchaturvedi9#gmail.com" readonly="readonly">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Your Email ID:</label>
<input type="text" class="form-control" id="email-name" name="email-name" placeholder="Email ID">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text" name="message-text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
</div>
</div>
</div>
</div>
My aim here is, when a user enters a value within the modal fields and clicks OK, user's data will be sent to the email servlet.
Thank you
You can see below example. Replace second and modal code as per your need.
setTimeout(function() {
$('#myModal').modal('toggle');
}, 200);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Bootstrap Modal button save is not working when clicked.Below is my jquery:
$('#add-more-academic').on('click',function(){
$('#myModal').modal();
})
//==================================================
$('.SaveAcademic').on('click',function(){
var academic = $('#new-academic').val();
alert(academic);
Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:
<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Academic Year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
</div>
</div>
</div>
</div>
</html>
I've got a class <div id="modal-data"></div> which is inside a modal
This is the code:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
<div id="modal-data"></div>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
With this piece of code:
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");
But its not working... Can any one help?
Try this
$(document).ready(function() {
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<select class="js-source-states" style="width: 100%" id="timezone">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
Your DOM structure is wrong you wrote block element div inside select element which is invalid. It should be like following:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
</select>
<div id="modal-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
Also you should write your code under a specific callback, in this case you should in show.bs.modal callback:
$('#mymdl').on('show.bs.modal', function (e) {
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<h1>HI</h1>");
})
$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
</div>
</div>
</div>
</div>
I think this is what you want. if it is i can explain you
I’m using BootStrap
I open a modal(the modal is inside a file).
<div id="buy-function" class="modal fade" 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" id="gridSystemModalLabel">Achat </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="operation" role="form" method="post" >
<div class="form-group">
<label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
<div class="col-sm-9">
<input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
</div>
</div>
<div class="form-group">
<label for="justif" class="col-sm-3 control-label">Justification : </label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<!--<div class="modal-footer"></div>
<div id="live_invoice"></div>-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" id="new_operation" class="btn btn-info">Acheter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I open a modal with a button.
<div class="box-body">
<button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
<button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
</div>
However, when I want to close this modal
(I use
$('#buy-function').modal('hide'); ),
my script :
<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
$.ajax({
type: "POST",
url: "/views/composants/new_operation.php", //process
data: $('form.operation').serialize(),
success: function(msg){
//alert(msg);
$('#buy-function').modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
it doesn’t work. Any idea ?
Check that you are not including jQuery more than once. Bootstrap will apply it to the first instance only and when jQuery gets initiated again then it will be lost.
Instead of using the default jquery alert popup, I'd like to trigger a Bootstrap Modal. All the tutorials I've read, the modal is triggered by the click(function(){});. I'd like to have if triggered if a condition in my "if statement" is not met. Here is the code I have
var test1 = $('#test').val();
$('#go').click(function() {
if (test1 === "") {
alert("Please enter all values in the fields");
$('#myModal').modal('show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
In your case, since the modal has an id of id="#myModal", you need to escape the # within the jQuery selector, $('#\\#myModal').modal('show'):
$('#go').click(function() {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Please enter all values in the fields.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
Remove the '#' from the id and your code should work
<div class="modal fade" id="myModal">