Im using Bootstrap on a website where a page has a few modals.
Using Chrome Dev Tools i was testing the network usage and noticed that the images in the modal view are called/pre-loaded when the page loads - I guess that makes sense they are all in divs on a single page.
So my question is it possible to avoid that div from running only until the actual link to a particular modal is clicked?
Thanks.
Use $.get or $.load in the click event handler of the button to display the modal.
Note that the HTML data you load via this ajax technique must be in the right bootstrap modal template.
See this gist here
Related
I've created a modal (Bootstrap v3) on a site that doesn't allow for any Javascript, just HTML and CSS (Bootstrap v3). I'd like to have a button at the bottom that users can click to close the modal, that will also open up a new page. Currently the button can either only close the modal, or open a new page, not both.
Is there a way to do this in Bootstrap v3, without using JS?
I Agree
I have a silverlight page in which I want to add a modal bootstrap. My problem is that the modal is displayed behind the silverlight page.
I saw that this can be happening because modal div is not isolated from the rest of your code, but in my case it is in the bottom of the code. Here is the source code
In the bootstrap CSS file increase the zindex if you have included a CDN. The use .modal{z-index:300}. Increase the 300
I am writing tests for my Bootstrap 3.x webapp using Nightwatch. All is working fine, but I would like to add the "close modal by clicking somewhere next to it" in one of my tests. I don't seem to be able to identify the html element that's supposed to receive the click event however.
Can anyone help me with this?
Thanks!
The background is a div with class .modal-backdrop. According to the docs: "...generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal."
I am trying to implement popup window in web application, i found following resource very useful
http://www.scriptfx.com/windows/plain/simple.htm#7
but all the examples shown here having following
menubar/toolbar and address location.
In my html, i am calling high-chart to plot data points.
Structure of html
<html>
<body>
adding high chart plot by using div id.
<script>
script for plotting plot using high chart
</script>
</body>
I really don't don't need html only. I can simply do the same in popup window.
How can i generate a pop up window without such bars i.e. a plain html with option for closing window on clicking a button or cross on it.
You can't change the design of the Browser popup window, from your comment you just want to popup a simple html code so there is a lot of easy to use custom modals (popups) built using javascript.
try one of these (just a simple search for jquery modal window and you will find a lot)
Simple Modal
jQuery UI dialog
Thick Box
Bootstrap Modal
Edit
you can show your dialog this way ( jQuery UI )
<div id="popup" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information.</p>
</div>
<!-- button to show -->
Click to Show
javascript
$(document).ready(function(){
// show dialog on click
$('.showModal').click(function(){
$('#popup').dialog({width: 600,height: 600});
});
});
You cannot set window properties in HTML at all. All you can do in HTML to create popup windows is to use the target="_blank" attribute, but it only suggests that a link be opened in a new browsing context, which might be a new window, but these days it is more often a new tab.
What you are referring to is JavaScript code, not HTML. There are many resources, including SO questions and answers, on opening windows that way, as well on reasons for not doing so and using more advanced methods like modal dialogues.
I have a (JSF 2.0/ Primefaces 2.2RC-SNAPSHOT) app that has
<p:layout>
I use a lot of dialog in my application and before the newest version of primefaces came out there was no way to display a dialog with a modal on top of the layout without putting the dialogs outside of the tags.
So I did just that. The issue I am having now is I am noticing that constructors and postcontructs are being called when my application is loaded. This is because the view with the layout is being loaded and therefore all my dialogs are being loaded.
I don't want these constructors being called until I am actually dealing with the appropriate views in my application.
I have been testing the appendToBody attribute on the
<p:dialog>
tag but it seems really buggy. Everything works fine on the initial rendering of a view. I can open a dialog close it etc and it works fine. If I navigate away to another view and then come back to the initial view and open the dialog, everything is running off the page. The dialog window is in the correct place but the content is not.
My question is 1. Is there a way I can have the dialog windows outside of my layout as a child of the
<h:body>
without having all the managed bean constructors associated with them initiated when the application loads?
Or does anyone know how to fix the alignment issue when using the appendToBody tag? Thanks.
When using layout and dialog, I usually place my dialogs outside of the layout as a direct child of the body element. I have a special ui:insert part in my page template for this.
appendToBody was added to make this easier, if it doesn't work well for you, give this approach a try. I know modal dialogs and layout can work this way.
without having all the managed bean constructors associated with them
initiated when the application loads
Maybe the managedbean gets loaded when your dialog is rendered.
Try rendering the dialog only after the button click, perhaps byputting rendered="#{mybean.flagLoadMyDialog}" on the dialog, and set the flagLoadMyDialog when the button is clicked using ajax.
Also remember to ajax-update the dialog after the button click.