I have a problem with Modals and remote option: if i provide a remote href for loading the content of modal popup from that url, when modal window appear I get this error in console:
"Error: Syntax error, unrecognized expression: /my/url" (jquery.min.js row2)
anybody with the same problem and/or solution?
I have the same problem with bootstrap 3.
It works nice with an inline load (href="#id") but same error when trying to load remote content, either via href="remote/url" or data-target="remote/url"
Edit:
I've found the correct way to do it.
Bootsrap allways need a modal container, to inject the ajax loaded content in it.
Thus, you need to give to your link both attribute: the remote target and the div to show.
Here is the simplest way:
<!-- The modal trigger link -->
<a data-toggle="modal" href="http://your/link" data-target="#my-modal" >modal link</a>
<!-- Invisible modal to render content -->
<div class="modal fade popin" id="my-modal" tabindex="-1" role="dialog" aria-hidden="true"></div>
I had the same problem. The solution is to use data-href attribute instead of href:
<a data-toggle="modal" data-href="http://your/link" data-target="#my-modal" >modal link</a>
As href value, Bootstrap modal expects valid selector.
Related
I've been searching and trying different ways to change an href attribute through Javascript. Few things have worked better than others.
The problem with this approach is that the variable on the href is not working. I guess there is a better way to include a variable within an html tag.
I'm really stuck on this so would appreciate any help.
Here is the code of the modal window:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href=enlace target="_blank">OK</a>
</div>
</div>
And this the button that the user clicks on before the modal window is shown:
<script type="text/javascript">
var enlace;
</script>
<button onclick="enlace='https://cloqq.com/actividad/tu-aventura-interactiva';return false" id="" class="go-btn pink-bg">Empieza a crear
</button>
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
You can use setAttribute to reassign the href, the way you're using javascript in html doesnt work like that.
const itemYouWantToUpdateHref = document.querySelector('.btn-ok')
function changeHref(link) {
itemYouWantToUpdateHref.setAttribute('href', link);
}
<a class="btn-ok" href="www.google.com" target="_blank">My link will change</a>
<button onclick="changeHref('www.youtube.com')">click to change href from google to youtube</button>
You can use your code itself with only some changes and without any script tag. look at code below:
<button onclick="window.enlace='https://cloqq.com/actividad/tu-aventura-interactiva'" class="go-btn pink-bg">Empieza a crear</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href="javascript:window.open(window.enlace||'defaultAddress', '_blank');">OK</a>
<!--
!! If you like to show an alert when the button is not clicked yet, try line below instead above line:
<a class="btn-ok" href="javascript:window.enlace?window.open(window.enlace, '_blank'):alert('Please click the Button first!');">OK</a>
-->
</div>
</div>
If you run above snippet and look at console, you can see all things is fine (but because Security problems this will not work with these URLs in current page and you should copy it in your project or an empty html file for seeing the result.)
I have a modal in my application which currently opens using bootsrap:
<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
<div class="full-page-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe src="http://www.example.com/id/1"></iframe>
In my HTML I have a button attached to a function:
<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>
At present bootstrap opens the modal and Angular handles the click.
What needs to happen is this:
User clicks on button
The iFrame URL src is updated according to the button clicked
The modal is made visible.
What I think I need to do is this:
Remove the opening of the modal from bootstrap and hand this to Angular2
On button click the function updates the iframe src
The function then opens the modal (or hands this back to Bootstrap?)
My questions:
What is the best method to update the iframe src? Maybe to include a variable: {{iframeSrc}} and to update this after click?
What is the best way to handle modal opening?
Thank you!
Well this turned out to be really simple.
I created two functions:
initPlay(id) {
this.iframeSrc = "http://example.com/game/" + id;
}
clearPlay() {
this.iframeSrc = "";
}
I left bootstrap to manage the modal open and close and simply used the Angular2 (click) method to initiate the src change.
I added a "loading" class to the iframe to show that action is taking place.
Thats it.
I am using bootstrap popup model as follows :
<div class="modal modal-top fade assigns-modal">
<div class="modal-dialog">
<div class="modal-content">
Content goes here....
</div>
</div>
</div>
And I am calling it as
Open
On click it is not opening a popup with specified content. But it is showing a error in json format
{"status":-3,"message":"Unable to reach server at this moment, please try after some time."}
I am not able to resolve this error. Because it is working fine as a plain HTML but once i integrate it with PHP page.
Any help is appreciable.
Thanks.
Edit
I can see the GET call in firbug console.
GET http://localhost/project/admin/.assigns-modal 200 OK 43ms
Basically, in your href, you give something with a #hash for two reasons:
# is used to select elements using id.
# doesn't navigate away from the page.
So please change your .assigns-modal to #assigns-modal.
So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>
It appears to be a missing anchor close tag in the author's code.
Is it possible to load a page fragment using Twitter bootstrap's modal components? I want to load a page into the modal, but I only want a section of it. For example, I want the form on the page without the wrapping navigation. I've done this type of thing before using jquery tools overlays and jquery's .load function. But the modal stuff doesn't allow for this type of information to be passed in.
Here is some example text I'm working with:
<a tabindex="-1"
href="metadata.html"
id="metadata-link"
data-target="#modal"
data-toggle="modal">Metadata</a>
<div id="modal" class="modal hide fade in" style="display:none;">
<div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
<div class="modal-body"></div>
<div class="model-footer">footer</div>
</div>
<script>
$(document).ready(function() {
$('#metadata-link').modal({show:false});
});
</script>
The 'metadata.html' page is a full html document. The contents of this page get loaded into the '.modal-body' element as expected. But the nothing displays...
If I switch the 'metadata.html' page for a page that contains only a 'div' contents, the modal displays.
Does anyone have any idea why this would happen?
You can do it manually:
<script>
$(document).ready(function() {
$('#metadata-link').click(function(){
$.ajax(
{
url:'url-to-load-page',
success: function(response){
//do what ever you want here to extract the part you want
$('#modal-div-content').html(adapted-response);
$('#modal').modal('show');
}
});
});
});
</script>
bootstrap uses the jquery load method which allows a URL and a fragment selector to be specified:
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
So in my case (adding a musician) i could use a normal link tag like this:
</i> Add
Which extracts the form element from the container div and shows it in the newItemModal modal. This approach allows me to re-use the modal for other items
Declaring the fragment id using data-remote worked for me:
<a href="remote.html" data-remote="remote.html #fragment" data-toggle="modal" data-target="#modal">