2010-11-24 5 views
21

HALLOSetzen Sie die Modalbreite des Dialogs für jquery ui?

ich this demo bin mit einem modalen

Dialog

angezeigt werden, wie kann ich die Breite für den Dialog gesetzt, wenn ich die Straße mit bin es für Google:

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> 

Antwort

35

Aus der Dokumentation:

sollte diese Arbeit:

$("#dialogStreetView").dialog("option", "width", 460); 
+0

ich diesen $ versucht ('# dialogStreetView'). Dialog ("Option", "maxWidth", 600) ;, ist es nur Breite, ich brauche einen Kaffee, – Bart

+0

Nun, es ist eigentlich ein ' maxWidth als separate Option. Überprüfen Sie die Dokumente, und ja ein Kaffee funktioniert sehr gut :) –

+0

Und wenn Sie dies tun möchten, wenn das Dialogfeld öffnet, stellen Sie sicher, dass Sie die oben genannten an das Ereignis erstellen, nicht das offene Ereignis. – rakensi

17
<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> 

====== ====== Körper

<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

3

einfach füge einfach widt hinzu h: 500

$('#dialogStreetView').dialog(width: 500,"option", "maxWidth", 600); 
Verwandte Themen