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.
Related
I'm setting up a web site rich of images.
I've designed it as a landing page: all content has to be on the main HTML page, without flow in others, actually there is the only index.html.
This will be the official website of a Theater, the images are all related to their shows.
To estimate the number of images:
40 shows an almost 40 pics per show (About 600kb per Image)
Almost 1gb of pictures in the same page!
Every show is represented with an image and when you click the Show image a Modal is opened showing the related pics in a grid and information about it.
I'm using Bootstrap 4, Jquery and CSS.
The problem is: if I add all the modals (with the pics in it) to HTML page my website get very lazy and doesn't ** load properly**.
I'm searching a way to load dynamically the pics every time you click on the show, avoiding to load the Dom with ALL the pictures from the first moment.
I've tried with Jquery injection, but is very hard to handle when the modal is open and when modal is closed and I don't think that is a proper and strict way to code.
I was thinking about a PHP server manipulation of images.
Php elaborate and minimize the images to make thumbnail so when images are seen in a grid they are not in the full size, and only when images are clicked they shown in full size (with lightbox.js).
But I'm a complete noob with PHP, and I didn't find an easy tutorial.
I'm opened to any solution you think I can implement, mostly to those who care about SEO optimization and faster loading time for client!
<!-- MODAL EXAMPLE -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-full " data-dismiss="modal">
<div class="modal-content mx-auto">
<div class="modal-body">
<div class="column mx-auto">
<div class="sidebar-box">
<h2 class="title">SHOW TITLE</h2>
<h2 class="subtitle"> SHOW SUBTITLE</h2>
<p class="middle">MIDDLE INFORMATION</p>
<p class="description">SHOW DESCRIPTION</p>
</div>
</div>
<div class="column mx-auto">
<!-- THERE WILL BE ALL THE IMAGES IN A GRID-->
<div class="row justify-content-center">
<a href="stages/alesi/alesi1.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi1.JPG" alt="" />
</a>
<a href="stages/alesi/alesi2.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi2.JPG" alt="" />
</a>
<a href="stages/alesi/alesi3.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi3.JPG" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you very much to all stack overflow community!
One way to do it is with AJAX, yeah, you can have the content of each modal into a different HTML/PHP file, and on click on the modal to make an AJAX request, and putting the specific modal content(html file) into the page.
So, basically, you will have the whole <div class="modal-body"> div in a different HTML file, and on modal click you will have something like that
$("the_modal").click(function(){
$.ajax({url: "modal1.html", success: function(result){
$("#myModal modal-content").append(result);
}});
});
Of course, you can put data attributes on the modal and use them in the AJAX, so it will work for all the modal across the website.
The other thing that will help a lot is optimizing the images, reducing the size, the quality.
If your main problem is the amount of images that will have to be loaded delaying your page so I suggest that you try to implement images lazy-loading. This is going to enhance the performance of your website since your images will load only when they are shown in the viewport.
There is a jQuery plugin you can use for that: jQuery.Lazy()
You can use this link to refer how to load dynamic data in a single bootstrap modal.
https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content
If you have the show data in database or JSON file, you can then pass the id of the show which is clicked in the data attribute as given in above example.
Then using modal event show.bs.modal, you can fire an ajax call, which will populate the required data in the .modal-body and on close you can clear the data from the modal.
I would advise against loading 40pics x 600k by default. You need to be thinking about mobile users.
I would use a gallery script (I recommend Photo Swipe) and a request to a server-side script returning a json that will be used to create the gallery only on demand.
Check this page: https://photoswipe.com/documentation/custom-html-in-slides.html
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.
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.
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">
The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.
Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')