Calling Bootstrap Modal from Bootstrap Popover - javascript

Goal: I would like to call a bootstrap modal from a bootstrap popover. I was looking at Calling a modal from a Bootstrap popover and tried to implement the code.
Issue: Upon clicking the button that triggers the modal from inside the popover, it will darken the background but no modal appears. Not sure what the issue is exactly. The code I tried from the linked article above gives the same result as if I just set up the button to trigger a modal without the suggest jQuery in that article.. Currently my code is set up to use the advice suggested there, and this is what I have so far...
Thanks in advance to all help.
$(function () {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#messageUser", function() {
console.log('Clicked message button');
$('#messageUserModal').modal('show');
});
});
/* --Tried this too, thinking the popover and modal were fighting
$(function() {
$('#messageUser').click(function() {
console.log('Clicked message button');
//$('[data-toggle="popover"]').hide();
$('#messageUserModal').modal('show');
//$('#messageUserModal').show();
});
});
*/
HTML/PHP/BS
<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button>
</form>
<div class='modal fade' id='messageUserModal' 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'>Send Message to ".$helperName." </h4>
</div>
<div class='modal-body'>
<textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Send Message</button>
</div>
</div>
</div>
</div>

I found the answer to the problem.. I thought that I should try to call the modal from outside of the popover (i.e. a button somewhere on the page to press to call that modal, just to see if the problem was isolated to the popover as I had originally concluded..). Once I added the same button elsewhere I got nothing to happen. I then realized that the code for the modal was in the popover so I then took that code put it outside of the popover. When I then clicked on the new button I saw that a modal came up as expected, but then I clicked on the original button that I was trying to call the modal with and it then also triggered the modal.. so that told me that when the popover is fired it must be executing the modal but never showing it or something to that extent.. so I will remove the code for the modal outside of the popover code and it will work just fine. Long winded answer but hopefully the journey to get to the answer will help someone else as well.
Also, important to note, if using bootstrap 3 you do not need to write any fancy jquery code to show the modal, or whatever the suggestion was from the article I referenced at the beginning of the post..

Related

DNN Open 'Leaving Site' Modal on external link click

Newbie here. Tried a few different examples on the site without any luck. My situation is that we have links across our entire DNN site (Evoq 8.5) that have the following format.
<a href="www.site.com" class="external-link">
I am trying to open a modal that says that you are leaving our site every time a link with the external-link class is clicked. I'm also trying to accomplish this in the DNN skin file so it applies to all pages. Here is what I have right now.
Modal:
<div id="modalExternalLink" class="modal fade">
<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>
<span class="modal-title">Thank you for visiting our site.</span>
</div>
<div class="modal-body">
<p> You are now leaving our website.</p>
<div class="button-container">
<button type="button" id="btnContinue" class="btn-continue" style="margin-right:10px;">Continue</button>
<button type="button" class="modal-button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Attempt to show the modal and pass the href of the link to the continue button:
$('.external-link').click(function(e) {{
e.preventDefault();
var link = (e.relatedTarget).attr('href');
$("#btnContinue").attr('href', link);
$("#modalExternalLink").modal('show');
});
This doesn't work in our environment. It just goes straight to the link's href URL. I'm sure there are other ways we could do this, but there are hundreds of links across our site that have the external-link class that we would have to change, and this modal has to be opened for many links with different URLs.
You have an extra { in your function's first row. This causes an error, jQuery stops execution, e.preventDefault() is never reached thus the link will be opened. Because of that you do not see that the script has an error.
Second I would wrap the code in a $(document).ready(function ().
$(document).ready(function () {
$('.external-link').click(function (e) {
e.preventDefault();
//rest of the code
});
});
Finally got this figured out if anyone stumbles upon it. The modal was fine, but my javascript was incorrect (and had a few dumb mistakes because I'm tired). Here's the final working javascript:
$(document).ready(function(e){
$('.external-link').on('click', function (e) {
e.preventDefault();
console.log($(e.currentTarget).attr('href'));
document.getElementById( "btnContinue" ).setAttribute( "onClick", ( "javascript:window.location.href=\"" + $(e.currentTarget).attr('href') + "\"") );
$('#modalExternalLink').modal('show');
});
});
You can obviously strip out the console log. The main problem was that e.relatedTarget was coming back undefined, so I had the log in there to monitor it. From a little reading this was a difference between Bootstrap 2 & 3.

Bootstrap Modal not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->
It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

jQuery click function not triggering

I am trying to integrate a bootstrap layout into my angular.js project.
I have added the bootstrap.js and bootstrap.css and the layout custom CSS and JS.
my project have jquery added to it.
The problem that I am facing is that a click handler is not being triggered.
this is my code:
$(document).ready(function () {
alert('ready');
$('[data-toggle="offcanvas"]').click(function () {
alert('click');
$('.row-offcanvas').toggleClass('active')
});
});
a popup with "ready" popups at each page refresh however when i click the button that has the attribute data-toggle="offcanvas" nothing pops up.
I have even tried to ad an id attribute to the button and target the button in jquery as follows with no success:
$('#toggleButton').click(....);
the button is html looks like the following:
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
what seems to be going wrong?
Thanks in advance.

Hide Modal in Twitter Bootstrap when clicked

Here is a sample code from twitter bootstrap but . . .
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.
From bootstrap doc :
Manually hides a modal.
.modal('hide')
$('.modal').modal('hide')
So if you want to hide it on click you can bind this action to the click event
$('#yourid').on('click' , function() {
$('.modal').modal('hide')
});
if you want to hide it after some second that you loaded the document you can try with a timeout
$(function(){ //document ready
..
.. //your code
..
setTimeout(function(){
$('.modal').modal('hide')
}, 2000); //2000 = 2 second
..
})
UPDATE 1
To bind it on the close button give him a class or id
Close
now
$('.closebtn').on('click',function() {
$('.modal').modal('hide');
});
If you want to bind only on that close button use an id instead of a class
Old post but this can now be done using HTML attributes.
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
try this
$('.modal').modal('hide');
I had the same problem. If it's still needed you can try to put your 'click' event in another event 'shown.bs.dropdown' like so:
$('#myDropdown').on('show.bs.dropdown', function () {
$('#yourid').on('click' , function() {
$('#myDropdown').modal('hide');
});
});
In my case the 'click' event wasn't binded when the modal was shown. So when I put it in 'show.bs.dropdown' event, everything went as I expected. 'click' was binded to modal as soon as modal was shown.

zclip not working within bootstrap modal

I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?
I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});
In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)

Categories