I'm using twitter bootstrap's modal window to load a remote image
<img alt="250x150" src="/assets/250x150.gif">
I'm following these docs
The image is not rendering correctly in the modal.
I get a load of jumbled data instead -
What's happening? How can I fix?
Yes, I had this too. The answer I found is here.
I created a link like this:
<a href="gallery/blue.jpg" class="thumbnail img_modal">
//handler for link
$('.img_modal').on('click', function(e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$('#modal').modal('show');
});
//and modal code here
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
When using href to specify remote content for a modal, Bootstrap uses jQuery's load method to fetch the content, and then sticks the retrieved content into the modal's body element. In short, it only makes sense when the remote content (the href value) loads HTML or text.
What you're seeing is expected, as it's the same thing that would happen if you opened the gif file in a text editor, and just pasted it into an HTML tag.
To have it work the way you want, the href needs to point to an HTML document that contains an <img> tag that references the image you want in the modal.
In post of Mark Robson – change 'this' to 'this.href':
$("#modal_img_target").attr("src", this);
=>
$("#modal_img_target").attr("src", this.href);
(I don't have reputation for comment)
Related
I want to insert an image in Modal but I need to use the value of the variable data-image as it will change according to the value of the image.
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>"
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src',url)
modal.find('#overview').text(overview)
})
</script>
<a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">
<div class="modal fade bd-example-modal-lg" 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">
<h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<p><div id="image"></div></p>
<p><div id="overview"></div></p>
</div>
</div>
</div>
I tried to use some shapes like text, val, innerhtml, but it didn't work. What is the best way to make it work what I need?
You need to use an img element as oppose to a div to set display your img and other content dynamically in your modal.
The reason its not working is DOM content is ready and you are applying styles to a div and it can not load an image asynchronously thats why you are not seeing anything.
I have added demo data and few other button to show that its all working now with different data coming from data-attributes.
Live Working Demo:
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src', image)
modal.find('#overview').text(overview)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Click Me
<br>
Click Me 2
<br>
Click Me 3
<div class="modal fade bd-example-modal-lg" 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">
<h5 class="modal-title" id="exampleModalLongTitle">
<div id="title"></div>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><img src="" id="image" /></p>
<p>
<div id="overview"></div>
</p>
</div>
</div>
</div>
First, understand what a modal dialog is: it is just a div (with content) that is positioned so that it sits on top of the rest of the page, usually accompanied by another div that sits directly underneath it and partially darkens the rest of the page while preventing the user from clicking on anything underneath. These two divs begin hidden, but can be displayed based on user activity, and then re-hidden.
The modal word indicates that this div structure has the focus - the user cannot interact with any other part of the page until the modal dialog is closed. This is accomplished via that second (overlay) div that is height/width 100% and is positioned (via z-index) to stack between the dialog and the rest of the page.
The important thing to note is that they are just ordinary div structures that exist on the page - or that are added to the page - at will. That means, you can change the content (text or html) inside the modal div structure as easily as you can change the content of any other div. There is nothing different about a modal div structure at all.
Bootstraps modal dialogs are exactly the same, but they include some extra sizzle that add some extra visual coolness and that make them a bit easier to work with. Other than that, they are exactly like self-made modal dialogs - which are exactly like ordinary div structures.
To demonstrate, we'll create a super-simple home-made modal dialog and use it to do what you request.
Note the following about the home-made modal dialog:
(a) We use position:fixed or position:absolute to remove the modal div structure from the usual HTML flow - allowing it to sit on top of the rest of the page.
(b) We use z-index to position the modal div structure ABOVE the rest of the page
(c) We add a second div (the "overlay") that sits on top of the page, but underneath the modal. Its purpose is to darken the page underneath the modal dialog and to prevent the user from clicking anything on the page until they finish with the dialog.
$('button').click(function(){
let img = $('#modal').data('image');
$('#modal-content').html(`<img src="${img}" />`);
$('#overlay, #modal').fadeIn();
});
$('#modal-close').click(function(){
$('#overlay, #modal').fadeOut();
});
#overlay{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);}
#modal{z-index:999;position:fixed;top:15vh;left:25vw;width:50vw;height:30vh;}
#modal-close{position:absolute;top:0;right:0;padding:10px;font-size:2em;border:1px solid grey;}
#modal-close:hover{color:dodgerblue; border:1px solid dodgerblue;cursor:pointer;}
#overlay, #modal{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='overlay'></div>
<div id='modal' data-image='http://placekitten.com/400/300'>
<div id='modal-close'>X</div>
<div id='modal-content'></div>
</div>
<button>Show Modal</button>
References:
Easiest way to use a div as a modal dialog with jQuery
For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.
A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.
hello everyone i need help. i wanna show dinamic data to bootstrap modal body.
here is my code so far :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
url : 'det_registration.php',
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
the modal windows is open. but, the ajax code is not execute for call det_registration.php and fetched data
what i missed ? thanks for your help :)
update:
i am sorry all. this is the code how i call the modal
<a title='detail' href="#myModal" data-toggle='modal'><span class="pull-left">View Details</span></a>
Not sure exactly what else you have in your code but take a look here.
I've added a button calling to your modal. With the code you provided, it all seems to be working just fine to me.
This was all I added
<button data-toggle="modal" data-target="#myModal" class="btn brn-primary">Click Me</button>
I know this is just a peace of code but please provide more information. In this case I don't know how you are opening the modal, this could be the problem.
Your script looks fine, if the ajax function was not executed is because your modal lister could't "listen" the event "show.bs.modal" try to put an alert just after the opening of the anonymous function to test it.
If you could't see the alert is because the event was not listened.
Finally, if you are opening the modal via JS, just remember that the function that opens it must exist before it was executed.
i have solved my problem. the problem is there is two jquery.js in my php file. the first one is bootsrap jquery.js and the another one is datatable jquery.js. then after i deleted datatable jquery.js, my problem was solved
I am using modal from bootstrap
<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title"></h4>
</div>
<div id="myModalBody" class="modal-body modalScroll"></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
This is my main modal box and I send some information and show modal when I need to inform user at the moment. But my idea is using this modal to show images and when user choose one I will save as avatar. So I created function like below:
<script>
$('#avatar').click(function() {
showMessage();
});
$('#eee').on('click', function() {
alert('333');
});
function showMessage(){
var txto = '<div id="eee">test me test</div>';
$('#myModalLabel').append('Coose Your avatar');
$('#myModalBody').append(txto);
$('#myModal').modal('show');
}
</script>
Now when I go on page and click div id = avatar I will see modal window but when I click: test me I have no result. So is it some way to do this?
try adding:
$('#eee').on('click', function() {
alert('333');
});
inside showMessage() ... your problem is that you have to rebind events to dynamically added elements if they are added after (document).ready or in this case the page rendering...
whenever i do this i just make a big function called rebindEvents() that I can call into to let the page know about my new items... just a warning, its not great for performance if you wind up with a lot of jquery elems you have to deal with, knockout is a much better library for dealing with dynamic html then doing it this way.
also, i'm assuming you are going to present a list of avatars, so you may want to swap eee to a class instead of id...
I need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" 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>
<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>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/