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.

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?

If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" 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">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

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.

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)