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/
Related
I wanted to make a "flexible" confirm dialog with Bootstrap 4 as I do not want to hardcode each confirm modal / action on its own.
So, with a standard Modal like
<div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="msgModalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="msgModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Doch nicht</button>
<button type="button" class="btn btn-primary" id="btnModelConfirmMessage">OK</button>
</div>
</div>
</div>
</div>
and the respective js-magic :D
function showConfirm(htmlInput,headerTxt, fun){
$('#msgModalTitle').text(headerTxt);
$('#msgModalBody').html(htmlInput);
$('#msgModal').modal('show');
$('#btnModelConfirmMessage').click(function () {
fun();
$('#msgModal').modal('hide');
});
}
I thougth, that by sending the "action" part as function which will exceute as soon the "OK" button #btnModelConfirmMessage is clicked.
Works like a charm, BUT it has a major bug.
It seems that the event-handler stays on the modal, i.e. if I show and just hide the modal the OK button will fire the function twice.
Among others I found this post
Bootstrap modal firing up incrementing times
where it suggest to move the click() event outside. I am sure this would work on that specific task, however I would lose the function.
So how can I unbind the handler using the hide.bs.modal event?
After reading the jquery-doc the answer is fairly easy:
Change:
$('#btnModelConfirmMessage').on('click',function () {
fun();
$('#msgModal').modal('hide');
});
Then add a new call on the hide.bs.modal event
$('#msgModal').on('hide.bs.modal',function () {
$('#btnModelConfirmMessage').off();
});
This removes the previously added handler, so we do not stack-up the events.
Hope someone will find this usefull :))
Cheers,
Daniel
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" 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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I'm new to Bootstrap and i'm facing problem with this example:
<!-- 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">
<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>
As per my understanding data-dismiss="modal" attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examples but there's no explaination.
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"
You should have something like this:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.
please note if it is this answer is useful.
If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal" will hide all active modals.
exactly in bootstrap.js find the element with attribute data-dismiss="modal" and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) behind. i.e. it hides the element but in more complex way.
It is roughly equivalent to onclick="$(this).closest('.modal').modal('hide')", i.e. it is searching the DOM upward for .modal (means, the definition of dialog itself) and hides it. The dialog's DOM is not removed.
I triggered the data dismiss with JQuery like so
$('.close').click();
This triggered like if user would of clicked the close button on modal, making data-dismiss hit. You might run in to some issues if there is layers of modals at one, hence will close all.
reference to where I found my solution here
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'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)