"Modal hide fade" preventing inner chart div from showing - javascript

In need of some help, I'm rather stuck. what I want achieve is, at the click of a button, a pop-up appears and has a bar chart showing based on the data sent. So far what I know is that the chart plots without a problem, however when I put it into the pop-up modal, it doesn't show.
<div class="modal hide fade" id=" PopUpModal" aria-hidden="true" style="float: initial; width :80%" role="dialog">
<h3 data-bind="text: title"></h3>
<hr />
<div id="ChartModal" class="chart" style="width: 780px; height: 300px;"> </div>
</div>
As you can see, the chart modal is inside the pop-up div. When the pop-up button is clicked, the pop-up modal shows empty except for the title and hr line. However you can see the space that is occupied by the chart modal, but its blank. When I take the chart modal outside the pop-up, it shows fine. When I remove 'class="modal hide fade" ', the chart shows inside the pop-up, however the pop-up is no longer a pop-up, but a div on the page.
Anyone see what I might be doing wrong? I'm not sure which bootstrap div "class" attributes I could use that would enable me to have the pop up hidden until clicked (I use $('#Pop-Up').modal('show'); in the js to change from hide to visible) and also allow the chart to show inside it.

It's probably because of chart plugin. Since chart is inside a hidden object plugin doesn't work. You must trigger chart plugin inside the modal callback function. I mean after modal window is displayed then run chart plugin not on page load.

Related

How does Bootstrap darken the page background behind a modal

I can't seem to figure out what Bootstrap is doing to darken the background of a page when a modal is shown. I see that a class is added to the body tag (modal-open) but that doesn't seem to affect the background.
https://getbootstrap.com/docs/4.0/components/modal/
I used a diff tool to see the difference between the modal open and the modal closed html and found the answer. When the modal is shown, Bootstrap inserts an empty div just above the closing body tag:
<div class="modal-backdrop fade show"></div>
When the modal is closed, the div is removed. The .modal-backdrop.show class has an opacity value of 0.5.
So that's how it's done!

Adding enhanced grid within a titlepane in dojo

So here goes
I have a widget that I have created which contains an enhanced grid.
I now want this widget to have a titlePane that wraps around the enhanced grid which allows me to collapse the grid to the bottom of the page on click.
so, thinking this to be a simple task i edited the template in my widget to be the following:
<div id="wrapper">
<div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Over one year'">
<div data-dojo-attach-point="gridNode" id="grid"></div>
</div>
</div>
The behaviour I was expecting was a title pane wrapped around my enhanced grid but instead all i am getting is the grid appearing with no title pane.
Looking at the dom I can see the div for the title pane but no title pane is showing when loading the web page in the browser.
Any dojoers out there know what black magic is required for this to work?

modal mask not masking the entire window

I'm trying to implement modal window on my page. Idea is to display a popup window with project screen shot and code sample. For now I've implemented popup window with screen shot. Seems to work fine except having 2 issues.
1) mask is not covering the entire window.
2) once popup window is closed, without refreshing if I click the screen shot again, mask is not displayed.
webpage
<div class="screenshot">
<div class="case">
<div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
</div><!-- end thumb-->
</div><!-- end case-->
</div>
.js
The following DIV has position relative set. This means any position: absolute elements below it will be relative to its position.
<div class="project" id="mobile"></div>
This is what is causing the overlay to only extend from that position.
The second click problem is due to #mask being faded out but not running fadeIn again like you do on the content div.
Also, to get a better response you should pick out part of the code and copy into JSfiddle. Then you can ask very specific questions about the overlay positioning.

Jquery UI modal (popup box) control size and hide by default

jsFiddle for this question
I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).
Unfortunately, I am having a couple problems:
I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:
<div class="modal" id="myModal" style="width: 800px; height: 900px;">
I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:
$(document).ready(function() { $('#myModal').modal("hide"); });
Any idea how I might be able to resolve these issues?
Answer 1: Try defining the modal CSS class and set the width and height.
Answer 2: when calling the modal function, pass in an option object with th property "show" as false.
$("#myModal").modal({show: false});
Answer 3: you can handle the "shown" event and wire it up to make an AJAX call to web page and set the result as the inner HTML of the div.
Try the following in the source. Worked for me.
$('#ModalForm').dialog(
{
modal : true ,
autoOpen : false ,
height : 300,
width : 400,
. . . .
try this
<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">
To answer the second question the documentation says you can add an option like $('#myModal').modal({'show':false}) so that on initialization it should not be shown.
Third question's answer is use an iframe or load the html using ajax. To stop people from submitting you could use javascript for that or place a clear div to prevent anyone from actually using it. The first method assumes you are loading the form from the same domain.
Try this to force the dimensions to the what you want $('#myModal').modal({'show':false).height('600px').width('500px');​
You can supply the .hide class to the container of the modal to hide it, which is the default bootstrap method of hiding modals. As to the size, you can again supply your own class with your custom width and height to the container and it should take up on it, the way you're adding it inline now works fine as well, just make sure to add it to the main container.
So all in all your modal container should look like this:
<div class="modal hide fade custom-size" id="myModal"> ... </div>
Note: Added the .fade class to add the transition fade/slide effects, you can remove it if you like if you don't want those effects.
And as for the modal poping up as soon as you load your page all you have to do to remove that behavior is not call the modal at all as you are now, that way the modal will only popup when you click on action or "Launch Modal" button.
Here is a cleaned up fiddle, you had some non-valid styles like float:center (i wish that one existed): http://jsfiddle.net/zkzuM/2/, full page demo: http://jsfiddle.net/zkzuM/2/show/
#myModal{
height:200px;
width:100px;
}
try adding something like this to the css
your javascript
$('#myModal').modal({'show':false});
Take a look at the fiddle and its result.
.modal-body class has a max-height of 400px.
If you want a static height as 900px you should set height and max-height of .modal-body.
Otherwise that close button and its bar might float over the box.
#myModal .modal-body {
height: 775px;
max-height: 800px;
}
It's 775px for a 900px high #myModal because of margins and paddings of the box model.
It's always 125px shorter. If you want to make it dynamic you can write something like:
$('#myModal .modal-body').height($('#myModal').height()-125);
You do it right but have take a look the bootstrap CSS if it use the max-width min-width and comment it out.
If it does not work in JS you can do it by putting hide class in modal wrapper.

jQuery UI tabs content border

I am trying to implement jQuery UI tabs in my web app.
I am using ajax functionality so that the tabs are in the main "layout" of the page and each tab contains a different web page.
I want to wrap the content of the tab in aborder, but that the navigation panel of the tab won't be in the border.
I tried putting a border on the main div of the content, but I see only the top border and the rest don't appear.
Any ideas?
http://jsfiddle.net/GW5M2/
vs
http://jsfiddle.net/GW5M2/1/
As Gregg's demo showed, you need a clearing element at the end of the list of floating elements. Make sure the clearing element is not (accidentally) floating (i.e. use float: none). So, you would do something like:
<div>
<div style="float:right">foo</div>
<div style="float:right">bar</div>
<div style="clear:both; float:none"></div>
</div>

Categories