We Keep Coding

Open a modal with Jquery from different pages [duplicate]

I have a page of links to internal pages I need to open up in a Bootstrap modal DIV. The problem is that it seems that using the latest version of Bootstrap v3 in conjunction with jQuery v2.1.4 just doesn't work when it comes to loading content this way. There's plenty of tutorials I've read about creating modals with Bootstrap and how remote content is being phased out. But there's got to be away to make this work with jQuery, or maybe not.
The theory is that when you click
<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>
the content of data-load-remote is supposed to be read and injected into the div with class modal-body.
<div id="myModal" class="modal fade">
<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">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</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>
</div>
</div>
However, when I try this example with jQuery v2.1.4 and BS v3.3+, what it does is open up a modal window with grey background but all the styling of the modal window is gone. Meaning it seems to only display the modal-body div, but the modal header, pretty modal frame and bottom buttons in modal-footer div are not displayed at all. The only way to close the box is to click outside the modal box.
I've found examples all around about how to open up remote urls this way, but they all use outdated version of bootstrap, not the version I'm working with. Can anyone shed some lights on this please?

So basically, in jquery what we can do is to load href attribute using the load function. This way we can use the url in <a> tag and load that in modal-body.
<a href='/site/login' class='ls-modal'>Login</a>
//JS script
$('.ls-modal').on('click', function(e){
e.preventDefault();
$('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});

From Bootstrap's docs about the remote option;
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
That's the .modal-content div, not .modal-body. If you want to put content inside .modal-body then you need to do that with custom javascript.
So I would call jQuery.load programmatically, meaning you can keep the functionality of the dismiss and/or other buttons as required.
To do this you could use a data tag with the URL from the button that opens the modal, and use the show.bs.modal event to load content into the .modal-body div.
HTML Link/Button
Click me
jQuery
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});

A different perspective to the same problem away from Javascript and using php:
<a data-toggle="modal" href="#myModal">LINK</a>
<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
<div class="modal-dialog" style="text-align: left;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<?php include( 'remotefile.php'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and put in the remote.php file your basic html source.

e.relatedTarget.data('load-url'); won't work
use dataset.loadUrl
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = e.relatedTarget.dataset.loadUrl;
$(this).find('.modal-body').load(loadurl);
});

If using #worldofjr answer in jQuery you are getting error:
e.relatedTarget.data is not a function
you should use:
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});
Not that e.relatedTarget if wrapped by $(..)
I was getting the error in latest Bootstrap 3 and after using this method it's working without any problem.

In bootstrap-3.3.7.js you will see the following code.
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
So the bootstrap is going to replace the remote content into <div class="modal-content"> element. This is the default behavior by framework. So the problem is in your remote content itself, it should contain <div class="modal-header">, <div class="modal-body">, <div class="modal-footer"> by design.

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.

Modal Disappears Quickly + Bootstrap + Javascript

I'd like to start with saying I've searched and searched for the solution to my problem -- and after trying everything I read -- no success. I just want to make a simple modal to pop up when a user clicks on a link (that isn't ready yet).
---Already Tried---
Made sure there wasn't a second bootstrap javascript file (especially in header)
Tried variations in javascript syntax
Tried variations in the link html
When I made the link a "button" then the modal was fine -- but I don't want a simple link to be a button.
$("body").on("click","#empty",function(event){
$("#myModal").modal()
})
<li>Our Blog</li>
I also tried
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal();
});
});
I suspect there's something wrong in the way the html is set up (since the modal worked for a "button" but wont for a regular link)
Let me know if you need more clarification -- Thanks for your help!

This is working modal... It may be helpful for you...
<script type='text/javascript'>
('#myModal').modal('show');
</script>
<li>Click Here</li>
<div id="myModal" class="modal fade" role="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>
otherwise try this code...
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal('show');
});
});

If your link "isn't ready yet" when you initiate the modal with Javascript it won't work.
Assuming that your link is created dynamically you have to make sure you initiate it once it is in the DOM, in a JS callback or however your link is created (instead of the Document.ready function).
Also worth noting that to initiate the default triggering (setup in the html with the 'data-' attributes) you simply use:
$("#myModal").modal();
But if you want to trigger it manually in a onClick function, you'll need to add 'show' or 'toggle:
$("body").on("click","#empty",function(){
$('#myModal').modal('toggle');
)};
Again, both of these codes needs wrapping up in a document.ready function or a callback when your link is in the DOM.

bootstrap 3 remote modal appears to do nothing

I found I can include my modal markup in the body of my index.php and load it via this line without any problems:
<a data-toggle="modal" href="#modal-add">Add</a>
Assuming, of course, that there's a div somewhere in that page called #modal-add. When I moved that out to its own file (modal-add.html) and try this:
<a data-toggle="modal" href="modal-add.html" data-target="#modal-add">Add</a>
...I can't see that anything is happening. Chrome's developer tools don't register any activity when I click the link. I've created a basic fiddle to demonstrate: http://jsfiddle.net/tmountjr/3bnyq/2/
According to the docs (http://getbootstrap.com/javascript/#modals) that should just work, right? Where am I going wrong? (I'm referencing the Bootstrap js and css files from netdna, and jquery from their site, and everything else on my site is behaving normally, minus this.)
EDIT
Since it appears that fiddle has a built-in cross-domain request, here's a bare-bones setup that anyone with a WAMP server can try:
modal.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<p>Click here</p>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
modaltest.html:
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Designation</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="form-group">
<label for="add-designation">Designation Description:</label>
<input type="text" name="add-designation" id="add-designation" class="form-control" />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="resetdesignation">Reset</button>
<button type="button" class="btn btn-primary" id="adddesignation">Add Designation</button>
</div>
</div>
</div>
</div>

I think you have to point data-target attribute to element which exists in DOM (not returned in AJAX-response).
And as I know returned result just placed into target with .html() method which equal to innerHTML which replaces everything inside target.
So you can point all links to one Modal (with id="modal") and it's content will be just replaced with AJAX-response.

As an aside, it's also worth noting that this method (using a remote page as your dialog source) is limited out of the box to one external source. (In other words, if you have three different remote sources it'll only ever load the first one you click.) I tried emptying the #modal div after it closes but that didn't seem to work; the only way I found around it was this fiddle which overrides the default modal behavior, manually loads the content each time, and then displays the modal. For good measure (though I don't think it's required) I empty the div after the modal closes, just so I don't have extra code laying around inside my page. Here's my code:
$("[data-target]").on('click', function(e) {
e.preventDefault();
var placeholder = $(this).data('target');
var target = $(this).attr('href');
$(placeholder).load(target);
});
$('#modal').on('hidden.bs.modal', function () {
$("#modal").empty();
});
EDIT
There's an even better solution documented here.

How do I show a bootstrap modal from within a javascript function?

I have a button on my page that when it is pushed it triggers some javascript functions to occur, and one of those javascript functions to open a bootstrap modal, but I can't seem to get it to work. Here is my code... please help.
//elsewhere on the form is the button that triggers the javascript
Yes, cancel it
<!-- CANCEL A PO MODAL -->
<div class="modal hide fade" id="error-dialog" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
$('.btn-danger').click(function(event) {
if(some random conditional statement){
//some stuff happens here
}
else{
//Show form validation error modal-- I know this part is triggered but the modal will not show
$("#error-dialog").modal("show");
}
});

$("#error-dialog").modal("show");
This is the correct way, your code simply has an error. Go in to Chrome Console and run this command, it'll work.

you're missing if () { part of the conditional statement

It's a bit hard to see what you want to do with this partial code, but here is a working code based on yours:
http://jsbin.com/oqomiv/1/edit