I have following bootstrap html
<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" id="myModalLabel">Modal title</h4>
</div>
<form ng-submit="setFile()" enctype="multipart/form-data">
<div class="modal-body">
<input type="file" accept="image/*">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
And following function in controller
$scope.setFile = function () {
console.log($scope.image); // this console logs undefined
}
The above code somehow does not get image from input type file. How can I get that image and the I want to preview it when user clicks submit button?
UPDATE
I want to get file on form submit not on input change.
Related
i try open modal from another page and javascript file and got only black screen
javascript file
$('.myModal').on('click',function(){
$.ajax({
type: "POST",
url : base_url +"/Time",
data: "_token=HZNyRybabXWcTwp4kbeVpVsUGiuiYzFBDdiRJtZk" ,
success: function(response)
{
console.log(response);
$('.Stime').html(response);
}
});
});
home page
<div class="Stime"></div>
<!-- Button trigger modal -->
<button type="button" class="myModal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModals">
Launch demo modal
</button>
modal page
Time.html
<!-- Modal -->
<div class="modal fade" id="myModals" 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" 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>
i dont know why i got only black screen
I have several elements on a page.
When you click one of them, a modal should appears.
I wish it could be possible to navigate from one bootstrap modal to another.
How do I implement this behavior using Bootstrap?
This will be useful for you:
HTML Code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-next">
Next
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-back">
Back
</button>
<div class="modal fade" id="modal-next" 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">Page1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="next-trigger">Next</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-back" 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">Page2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="back-trigger">Back</button>
</div>
</div>
</div>
</div>
JS Code
$("#next-trigger").click(function(){
$('#modal-next').modal('hide');
$('#modal-back').modal('show');
});
$("#back-trigger").click(function(){
$('#modal-back').modal('hide');
$('#modal-next').modal('show');
})
Check it out.
I am having soon issues using the twitter bootstrap modal in my site. My site has the has bootstrap loaded and everything but the button is not trigger the popup and I don't know why. Can someone please help me?
This is the modal right after my body tag
<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-label="Close"><span aria-hidden="true">×</span></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>
You can try this.
$(document).ready(function() {
$("#btnshow").on('click', function(event) {
$('#myModal').modal('show');
$('#myModal').on('shown', function() {
// do more here
})
});
});
sample button that calls your modal window
<button id="btnshow">Show</button>
<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-label="Close"><span aria-hidden="true">×</span></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>
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
http://bootboxjs.com/examples.html
bootbox.dialog({
title: "That html",
message: '<img src="images/bootstrap_logo.png" width="100px"/><br/> You can also use <b>html</b>'
});
I would like to know how to create a custom dialog box that rises when button gets clicked n that box should be beside the the button...please help me out brothers
You can use Bootstrap model
http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</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-label="Close"><span aria-hidden="true">×</span></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>
Soooo I want to use these images I have so that when they are clicked it opens a modal dialog for a staff page on my site and I'm not sure how to do it
PS: I have seen something like this on here but its not what I wanted
<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">
EDIT~~~: Resolution to issue ~~~EDIT END~~
<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />
<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<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>
<h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
</div>
<div class="modal-body">
The Owner of the site and server.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--########################################################################## -->
You can use data attributes to load the modal box. img href value should match modal id value prefixed with #. In case below its #myModal. If it still doesn't work check JS errors or if the bootstrap js files are loaded.
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is the link for sample
http://www.bootply.com/TH49jSYRm6