I'm trying to create a Bootstrap modal as a requirement of my project, the problem is that I'm unable to trigger this modal using jQuery
this is the modal code:
<div class="container">
<!-- Trigger the modal with a button -->
<!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
<div class="modal-body">
<p>Please choose if you want to open an existing ticket or to create a new one.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button>
<button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button>
</div>
</div>
</div>
</div>
</div>
And this is the button from which the modal should be triggered:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button>
</div>
</div>
And finally this is the jQuery code:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
</script>
The problem is that the script code is not executing after triggering #myModal element
Any suggestion please?
Try this:
$("#myModal").modal('show');
use that you should put some parameter in .modal("hide") or .modal("show")
$("#myModal").modal("show");
and please use this button
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" class="btn btn-success">Submit</button>
</div>
</div>
You need to remove your javascript! There's no need for that...
Bootstrap will already open dialog reading the attributes data-toggle="modal" data-target="#myModal" on your button
So your javascript is causing the closure of modal right after it opens.
See this demo: JSFIDDLE
Try This:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
$("#myModal").modal('toggle');
});
});
</script>
Here you go i already fix for you.
reminder always put jquery first after bootstrap.
Example
<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>
i don't know why you need to add that script
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
DEMO
Related
Jquery and Bootstrap code is in same page lets say index.html
It's my content
<button id="btncreate" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Create</button>
I can't access myModal from the button
<!-- 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
Jquery :
<script>
$(document).ready(function(){
$("#btncreate").click(function(){
$('#myModal').modal('show');
});
});
</script>
Remove the script you made or at least try to comment it out. Bootstrap already has a javascript library that handles the modal. The script you made is conflicting with it.
https://www.bootply.com/0B9qovFDev
If you want to handle manually, your code should work if you just apply the JQuery show function.
<script>
$(document).ready(function(){
$("#btncreate").click(function(){
$('#myModal').show();
});
});
</script>
Your code is work. But try to your Javascript into this :
<script>
$(document).ready(function(){
$('button').click(function(){
$('#myModal').show()
})
});
</script>
you can check it works here http://jsfiddle.net/hvqoa8c3/
1) a. If you wanna show modal by javascript then you have to fire click event of button by code like:
<script>
$(document).ready(function(){
$('#btncreate').trigger('click');
});
</script>
b. If you are manually clicking the button then no need of javascript/jquery code, bootstrap automatically opens the modal.
2) Another way of doing it is using function like:
<script>
function myFunction() {
$('#myModal').modal('show');
}
</script>
Call this function on button click:
<button onclick="myFunction()">Create</button>
3) Make sure you have bootstrap and jquery files in your page:
<head>
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
<!-- put first the jquery path, otherwise the bootstrap.js won't work-->
<script src="js/jquery/jquery-3.1.0.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
Hope it will help!!
echo "<button type='button' class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle'></button>";
The button above loads delete.php
When the user clicks on the button i want to display a yes/no window. If the user clicks yes, it needs to load the delete.php(with id info). When click no it needs to load an other php file.
what is a good way to do this? i have tried using JavaScript but can't get it to work.
1st no need to add a button inside a link, just style the link:
echo "<a href=\"delete.php?id=$result[exportid]\" class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle delete-button'></a>";
Then attach to the buttons click event in javascript (jquery) and show a confirmation:
$(function(){
$('a.delete-button').click(ev){
ev.preventDefault();
var deleteUrl = $(this).attr('href');
var otherUrl = 'some other url';
if(confirm('Are you sure you want to delete this item')){
window.location = deleteUrl;
}else{
window.location = otherUrl;
}
}
});
You could easily make your confirm dialog like following:
<!-- Modal dialog -->
<div class="modal fade" id="myForm" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
File .js:
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
Using one instead of on prevents that the removal function is invoked at the next opening of the dialog.
I hope this could be helpful.
Follow a complete text example:
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code on OK click
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
<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"/>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
Take a look at the Bootstrap Modal component. It does exactly what you need it to do.
Please check my code:
HTML:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Teste</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">Teste modal</h4>
</div>
<div class="modal-body">
<label class="control-label">Select File</label>
<input id="input-1a" type="file" class="file" data-show-preview="false">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
JS:
$('#myModal').on('shown.bs.modal', function(e) {
alert("alert");
})
I'm using this plugin: http://plugins.krajee.com/file-input#usage
Here it is in jsfiddle: https://jsfiddle.net/DTcHh/30285/
In line $('#myModal').on('shown.bs.modal', function(e), it does 2 times.
Removing line <input id="input-1a" type="file" class="file" data-show-preview="false">, works correctly.
Any solution ?
You are using two JavaScript libraries that can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode as following:
jQuery(document).ready(function( $ ) {
$('#myModal').on('shown.bs.modal', function(e) {
alert("alert");
e.stopPropagation();
})
});
Hope this help!
I get the same trouble, and this is my solution
var tm = false;
$('#myModal').on('shown.bs.modal', function(e) {
if(tm) {tm=false;return;}
else { alert('ok'); tm= true;}
})
I'm trying to trigger another event on modal close event, here's what I've tried.
$(document).on('hidden.bs.modal', '.modal', function () {
alert("modal is closed");
});
but unfortunately, it does not work like 'nothing happen'. Any help, clues, ideas, suggestions, recommendations please?
UPDATE
Here's my HTML markup
<button class="btn thehide" data-toggle="modal" data-target="#notification_dialog" id="notification_trigger_button">Open dialog</button>
<div id="notification_dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content" id="text">
<div class="modal-header padding_zero">
<!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
<h4 class="modal-title display_table full_width text_transform_uppercase">Dialog</h4>
</div>
<div class="modal-body">
</div>
<div class="extend cler j_line"></div>
<div class="modal-footer">
<button class="btn btn-default margin_zero" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Check maybe that http://jsfiddle.net/h3WDq/1370/
If I anderstand well, is what you want.
$('.modal').on('hidden.bs.modal', function (e) {
alert("Hello");
})
Im trying to test the sample modals for my project but even the codes from jfiddles is not working on me. When i clicked the button, it only gives me a dimmed window. I also tried to google this but gives me nothing
This is the modal code im trying.
<body>
<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>
<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ckeditor.js"></script>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
Thanks for your help.
Demo
You are missing the data-target to display.
<a data-target="#myModal" data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog" data-toggle="modal">test</a>
<div id="myModal" role="dialog">
....
</div>
Taken from Bootstrap's demo
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
The modal is targeted via the data-target attribute and not href like you have here.