I am using the combination of Angular material and NVD3 while investigating why tooltips are not visible for me.
I have chopped and cloned the example provided from http://krispo.github.io/angular-nvd3/#/quickstart to plunker and it is something like this:
While the same one on angular material with nvd3 wrapper looks like this (no tooltip)
Was wandering if anyone had a similar experience and how it got resolved.
Declaration:
<nvd3 options="chartChartOptions" data="chartData"></nvd3>
and inside the controller
$scope.chartChartOptions = {
chart: {
type: 'multiBarChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 45,
left: 45
},
clipEdge: true,
duration: 500,
stacked: true,
xAxis: {
axisLabel: 'Time (ms)',
showMaxMin: false,
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -20,
tickFormat: function(d){
return d3.format(',.1f')(d);
}
}
}
};
$scope.chartData = [{"key":"Stream0","values":[{"x":1,"y":1.2191711805077412,"y0":0,"series":0,"key":"Stream0","size":1.2191711805077412,"y1":1.2191711805077412}]},{"key":"Stream1","values":[{"x":1,"y":2.8682672436400285,"y0":1.2191711805077412,"series":1,"key":"Stream1","size":2.8682672436400285,"y1":4.08743842414777}]},{"key":"Stream2","values":[{"x":1,"y":0.18054369373704626,"y0":4.08743842414777,"series":2,"key":"Stream2","size":0.18054369373704626,"y1":4.2679821178848165}]}];
For versions of libraries:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-data-table/0.9.11/md-data-table.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.6/ng-csv.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
I have tried trial and error but without help, anyone in a similar situation?
Sometimes this also occurs using the option useInteractiveGuideline with true value. Thsi is caused because there's a issue between the tooltips options being true. A way to make this work is creating a callback for the tooltip and set "useInteractiveGuideline:true"
callback: function(chart) {
$timeout(function() {
d3.selectAll('.nvtooltip').style('opacity', 0);
}, 100);
},
useInteractiveGuideline: true,
tooltips: true,
After lot's of digging, we had forgotten to include all framework's CSS sheets which would render the graph visible.
Related
I have a working website using the standard Visual Studio 2017. It is composed of a C# backend with a single API used to request data to be displayed in HighMaps based on the settings the user chooses from the jQuery UI. Since I don't love my Windows machine nearly as much as my Mac, I thought I would try using .Net Core 2.0 - and thus eliminate the need for my Windows laptop. Everything went extremely well (Kudos to Microsoft), but for some reason the jQuery code that calls the API, the data returned is not being pushed into the map like it should.
Here is the jQuery code that runs - the alert() does display the JSON data, but it never is reflected in the map. I can post HTML or CSS if needed, but for now I have included the head and script sections.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Locations</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/highmaps.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/maps/modules/data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/mapdata/countries/us/us-all-all.js"></script>
</head>
And here is the jQuery Code:
<script type="text/javascript">
var climateSteps = [
"Tropical",
"Semi-Arid",
"Desert",
"Humid",
"Mediterranean",
"Wet All Seasons",
"Wet Summer",
"Winter Snow",
"Polar"];
var climateRange = "C08";
$(function () {
$("#climate-slider .slider").slider({
range: true,
min: 0,
max: 8,
values: [0, 8],
slide: function (event, ui) {
climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
if (ui.values[0] == ui.values[1]) {
/* if user selected a single value (not a range), adjust text to fit */
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
}
else {
$(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
}
}
})
});
$.noConflict();
tableResult = '[{"code":"us-al-001","name":"Autauga County, AL","value":1}, {"code":"us-il-019","name":"Champaign County, IL","value":3}]';
(function ($) {
function GetCounties(userSelections) {
jQuery.support.cors = true;
$.ajax({
url: "http://localhost:5000/api/products/" + userSelections,
type: "GET",
dataType: "json",
success: function (d) {
data = JSON.stringify(d);
alert("API data received: " + data)
tableResult = data;
$("#map-container").highcharts().series[0].update({
data: JSON.parse(d)
});
},
error: function (d) {
alert("API found error: " + JSON.stringify(d));
}
});
}
jQuery(".button-submit").bind("click", {
}, function (e) {
GetCounties(climateRange);
});
data = JSON.parse(tableResult);
var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"]);
var lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all"], "mapline");
// add state acronym for tooltip
Highcharts.each(countiesMap, function (mapPoint) {
var state = mapPoint.properties["hc-key"].substring(3, 5);
mapPoint.name = mapPoint.name + ", " + state.toUpperCase();
});
var options = {
chart: {
borderWidth: 1,
marginRight: 50 // for the legend
},
exporting: {
enabled: false
},
title: {
text: "My Great Locations"
},
legend: {
layout: "vertical",
align: "right",
floating: true,
valueDecimals: 0,
valueSuffix: "",
backgroundColor: "white",
symbolRadius: 0,
symbolHeight: 0
},
mapNavigation: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1,
color: "#000099",
name: "Perfect!"
}, {
from: 2,
to: 2,
color: "#009999",
name: "Very Nice!"
}, {
from: 3,
to: 3,
color: "#00994c",
name: "Good Fit"
}]
},
tooltip: {
headerFormat: "",
formatter: function () {
str = "Error";
if (this.point.value == 1) {
str = "Perfect!";
}
if (this.point.value == 2) {
str = "Very Nice!";
}
if (this.point.value == 3) {
str = "Good Fit";
}
return this.point.name + ": <b>" + str + "</b>";
}
},
plotOptions: {
mapline: {
showInLegend: false,
enableMouseTracking: false
}
},
series: [{
mapData: countiesMap,
data: data,
joinBy: ["hc-key", "code"],
borderWidth: 1,
states: {
hover: {
color: "#331900"
}
}
}, {
type: "mapline",
name: "State borders",
data: [lines[0]],
color: "black"
}]
};
// Instanciate the map
$("#map-container").highcharts("Map", options);
All that appears in the map are the two counties that I hardcoded (to show that the map is working fine). I'm wondering if there is some package I need to add into NuGet or SDK Dependencies, but so much is working that I don't know what is missing. And I've not figured out how to show the console in Mac Visual Studio, so if any clues are going there, I haven't seen them.
Great thanks to the Highcharts support team - the ultimate answer to this problem is that the Mac Visual Studio .Net Core framework for some reason acts different than the Windows platform running the classic Visual Studio. Here is the answer that worked for me:
I needed to use this with Mac Visual Studio with .Net Core - no JSON.parse(d) required:
$("#map-container").highcharts().series[0].update({
data: d
});
Instead of this, which works for Windows full-blown Visual Studio (community edition):
$("#map-container").highcharts().series[0].update({
data: JSON.parse(d)
});
I'm using a Linechart from Google, in which I have drawn a graph from JSON data. There are two problems I'm running into I can't seem to fix.
Even though I have 'pointSize: 6' in my options, I still can't seem to draw any kind of point, anywhere on the graph. They just don't get visible.
I can't seem to edit any tooltip. I've added a new column, and neither "dataTable.setValue(i, 2, 'test')" nor manually adding a new entry in the JSON file with "Tooltip":"Test" seems to work.
Anyone who knows what I'm doing wrong, or who has a better suggestion for perhaps a framework/api to use? I'm trying to visualise a datastory with simple code.
<html>
<head>
<style>
body{
/*overflow: hidden;*/
}
#linechart{
margin-top: 20px;
margin-left: 30px}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script src='js/dimple.v2.1.2.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
$(function() {
$.getJSON('data/priceData.json', function(data) {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(1800);
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Value');
//dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true} });
$.each(data, function(i, object){
dataTable.setValue(i, 0, object.DateY);
dataTable.setValue(i, 1, object.ClosePrice);
dataTable.setValue(i, 2, object.Tooltip);
//dataTable.setValue(i, 2, 'yo');
});
var options = {
colors: ['orange'],
tooltip: {isHtml: true},
chart: {
title: 'The Value of the Bitcoin',
subtitle: 'in dollars (USD)'
},
animation: {
duration: 1000,
easing: 'in',
startup: true
},
width: 1950,
height: 850,
pointSize: 6
};
var chart = new google.charts.Line(document.getElementById('linechart'));
chart.draw(dataTable, options);
});
});
};
</script>
</head>
<body>
<div id="linechart"></div>
</body>
</html>
I got this to work using google.visualization.LineChart instead of google.charts.Line.
It gives me both points and tooltips, see here:
Instead of using
google.load('visualization', '1.1', {packages: ['line']});
Just try including
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
Then instead of:
var chart = new google.charts.Line(document.getElementById('linechart'));
Just try using:
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
That ought to do it. Let me know if you have other problems.
I use highcharts to display a chart in my page.
It works fine, but some times data in graph is too "condensed" so I should find a way to see the graph in a greater size.
I read several posts over internet on this subject:
- in general they suggest to use highslide, but i don't want to, as my page is already overlaoded by scripts
-somebody tries to pop up the content in a popup, it could fit to me but I didn't succeed
- the only quasi-working example which fits to me seems to be the following:
(inside the options object I add this properties).
exporting: {
buttons: {
popUpBtn: {
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
win.focus();
var divtag = win.document.createElement("div");
divtag.id = "div1";
win.document.body.appendChild(divtag);
win.document.write('<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>\
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>');
this.options.renderTo=divtag;
var chart = new Highcharts.Chart(this.options);
win.document.close();
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
However it is not working, as the div tag is not inserted and all i get is this
<html>
<head>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"> </script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"></script>
</head></html>
I can't understand the error.
I know it should be something simple but I can't get out alone.
--EDIT ---
I finally understood which could be a working strategy: create a "chartpopup.html" page, and passing it the parameters needed to build the copy of the graph I visualize.
So now I have:
index.html:
chartOptions = {
series: [
{
name: 'example',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}]
//// CUT SOME CODE
exporting: {
buttons: {
popUpBtn: {
enabled:true,
symbol: 'square',
_titleKey: 'FullScreenButtonTitle',
x: -60,
symbolSize:18,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function () {
look this!--------> generalPurposeGlobalVar = this;
var win=window.open('./chartpopup.html','Full Size Chart','location=0,titlebar=0,status=0,width=780,height=650');
}
},
exportButton: {
enabled: true
},
printButton: {
enabled: true
}
}
}
};
this.highChart=new Highcharts.Chart(this.chartOptions);
and chartpopup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chart full Size</title>
<script type="text/javascript" src="script/jquery-1.7.1-min.js"></script>
<script type="text/javascript" src="script/highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="script/highcharts/js/modules/exporting.js"> </script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 650; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
var mychart=window.opener.generalPurposeGlobalVar;
mychart.options.chart.renderTo= 'container';
chart = new Highcharts.Chart(mychart.options);
});
</script>
</body>
</html>
This two pages are actually working ONLY with the default graph. If I modify and re-render the graph, I'm not able to reproduce it on the popup page!
The code I use to modify the graph is basically this:
this.chartOptions.series=[{name:field.split('_').join('\n')}];
this.highChart.destroy();
this.highChart=new Highcharts.Chart(this.chartOptions);
this.highChart.xAxis[0].setCategories(_.isEmpty(mygroups) ? [] : mygroups);
this.highChart.series[0].setData([]);
this.highChart.setTitle({text: this.highChart.title.text},{text:(field.split('_').join(' ')), });
this.highChart.redraw();//
[...]
self.highChart.series[0].addPoint(result);//it's a point I calculated before
Here is an Highcharts exemple working with an "oldschool" popup :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
</head>
<body>
Open Chart Popup
<script>
function open_chart_popup() {
window.open('popup.html', 'chart popup title', 'width=1680px height=1050px');
}
</script>
</body>
</html>
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts foobar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
</body>
</html>
If this solution doesn't fit to you, could you tell us which JavaScript libraries you use (this example relies on jQuery). As the documentation says, highcharts requires either jQuery, Mootools or Prototype : http://www.highcharts.com/documentation/how-to-use
If you are able to use jQuery, you can replace that popup by using some cooler effects like those ones : http://jqueryui.com/demos/dialog/
Despite of that, if you want assistance for your script, could you consider making a jsfiddle, i'm not able to reproduce your error.
EDIT :
Okay, so you have all the stuff to deal with that.
I see two options :
You send the user input series JSON data to your server by an AJAX request. Then your server send you back a view or a bunch of html/js containing your highchart with the user datas. Back to the client, you do wathever you want with that (like triggering a popup containing the graph). I'm not too comfortable with backbone but i'm sure you can generate a template and render it back (this may help http://japhr.blogspot.fr/2011/08/getting-started-with-backbonejs-view.html)
The other solution would be to directly set your template (containing the graph) to the view but hidding him by default. Then, when the series are correctly setted by the user, you simply display the template (in a popup for example). This solution avoid a server call, so I would suggest that.
EDIT 2 :
So, I've made a jsFiddle showing a basic example on how to update a chart based on a user input : http://jsfiddle.net/MxtkM/
The example updates the last value of all the series on the graph, here is how :
$('#december_value').bind('keyup', function() {
var user_input_value = parseFloat($(this).val()); // cast to float
for (var s in chart.series) { // loop through the series
var old_data = chart.series[s].data;
var new_data = [];
for (var d in old_data ) { // loop through data objects
new_data.push(old_data[d].config); // config property contains the y value
}
new_data[new_data.length - 1] = user_input_value; // update the last value
chart.series[s].setData(new_data); // use setData method to refresh the datas of the serie
}
});
This example use the method setData by providing a new data array.
If this doesn't fit your needs, there is an another method to refresh your graph in whitch you rerender all the graph by doing var chart = new Highcharts.Chart(options);. (This is explained in the links above).
This two links are also a good read :
Reload chart data via JSON with Highcharts
http://www.highcharts.com/documentation/how-to-use (part 3 and 4)
Now you shoud be able to do whatever you want with your graph based on a user input.
After wandering around and asking questions, I found out that the best way to do it is to make fullscreen the div that contains the chart.
It's a very simple solution but it works.
This post is very helpful How do I make a div full screen?
A function like the following should do the trick on a "#graph" div:
function fullscr() {
$('#graph').css({
width: $(window).width(),
height: $(window).height()
});
}
Hope this help.
The Best solution will be HTML5 Fullscreen API for fullscreen
function fullScreen(){
var elem = document.getElementById("highchart_div_id");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
However, this piece of code only works in New Generation Browsers and I have hands on working output from Google chrome and Mozilla Firefox
Good Day
i am using jquery to show a tooltip popup the code i am using is below
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MainEndRequestHandler);
$(MainEndRequestHandler);
function MainEndRequestHandler(sender, args) {
loadeverthingmaster();
}
function loadeverthingmaster(){
try
{
$(".download_now").tooltip({
effect: 'slide',
delay:300
}).dynamic({ bottom: { direction: 'down', bounce: true } });
$(".help-bubble-link[title]").tooltip({
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide',
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
}
catch(err)
{
alert(err);
}
}
</script>
but when i load my page i get this error
TypeError: $(".download_now").tooltip({effect: "slide", delay: 300}).dynamic is not a function
I have no clue why this is happening. anyone got any idea or solutino...
Regards
Check the order you import your script in. Make sure this script tag is below the jquery-tooltip plugins import. Also make sure jquery and jquery-ui are imported above the jquery-tooltip plugins. Also you may want to try wrapping this code with document.ready() to make sure all script is loaded like:
<script type="text/javascript">
$(document).ready(function(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MainEndRequestHandler);
$(MainEndRequestHandler);
function MainEndRequestHandler(sender, args) {
loadeverthingmaster();
}
function loadeverthingmaster(){
try
{
$(".download_now").tooltip({
effect: 'slide',
delay:300
}).dynamic({ bottom: { direction: 'down', bounce: true } });
$(".help-bubble-link[title]").tooltip({
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide',
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
}
catch(err)
{
alert(err);
}
}
});
</script>
To make sure you have the proper libraries you could also try swapping the jquery import and the jquery tools import with this import that contains jquery + jquery tools + dynamic plugin:
<!-- jQuery Library + ALL jQuery Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
Also try:
$(".help-bubble-link['title']").tooltip({ //notice change in this line
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide',
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
I have a need to show 2 dialog modals at once. Due to the contents of the first dialog needing to use some absolute positioning and z-indexing, the z-index of the overlay is important to me.
The problem I get is if I show a the first modal at z-index of 300, the overlay gets a z-index of 301. If I then show another modal with a z-index of 500, the new overlay gets a z-index of 501. If I close both of the modals and open the first modal again, instead of getting an overlay with z-index of 301, it is 503.
Here is some sample code.
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#modal').hide();
$('#success-message').hide();
$('#show-modal-button').click(function(){
$('#modal').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 400
});
});
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
});
</script>
</head>
<body>
<input type="button" id="show-modal-button" value="show modal"/>
<div id="modal">
<input type="button" id="modal-button" value="push"/>
</div>
<div id="success-message"><p>test</p></div>
</body>
</html>
UPDATE
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
I was able to get this to work by removing the widget from the DOM when closing using the code below. I feel like this is a hack and that it is either a bug or that I am doing something wrong in my approach. I'll post my solution as an answer if no one can tell me what I am doing wrong.
$('#modal-button').click(function(){
$('#success-message').dialog({
modal: true,
buttons: {
OK: function () {
$(this).dialog("close");
$(this).dialog('widget').remove();
}
},
draggable: false,
title: 'test modal',
resizable: false,
zIndex: 500
});
});
Try setting the "stack" option to false:
'stack: false'
That might work for you
'stack: false' worked for me.
It seems setting it false stops the dialog recalculating its z-index when it is opened, or clicked or whatever.