HI
I am using this demo to display a modal dialog
how do I set the width for dialog if i am using it for google street view:
var point = new GLatLng(svlat, svlon); var panoClient = new GStreetviewClient(); panoClient.getNearestPanoramaLatLng(point, function (newPoint) { if (newPoint == null) { alert("no panorama found for this position!!"); return; } panoramaOptions = { latlng: newPoint }; myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions); $('#dialogStreetView').dialog("option", "maxWidth", 600); $('#dialogStreetView').dialog('open'); GEvent.addListener(myPano, "error", handleNoFlash); });
HTML:
<div id="dialogStreetView" title="Street View Provided by Google... " style="width:300px;height:300px"> <a id="closestreet-view" name="closestreet-view" style="cursor:pointer; text- decoration:underline" >Close</a> <div name="pano" id="pano" style="width: 300px; height: 300px"></div> </div>
Syntax: $( ". selector" ). dialog({ width : 120 });
You can use class 'modal-dialog' and change the width. You can change the width in success function of Ajax call.
Below is how I achieved a responsive jQuery UI Dialog. To do this, I added a new option to the config - fluid: true , which says to make the dialog responsive. I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.
From the docs:
this should work:
$("#dialogStreetView").dialog( "option", "width", 460 );
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $("#myDialogBox" ).dialog({ width: 500, autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "blind", duration: 1000 } }); $( "#myBoxOpener" ).click(function() { $( "#myDialogBox" ).dialog( "open" ); }); }); </script>
====== body ======
<div id="myDialogBox" title="My Dialog Box"> <div id="myContentLayer"> <p>My Content</p> </div> </div> <button id="myBoxOpener" class="myButton">Open Dialog Box</button>
jsFiddle Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With