0

まず第一に、私は JQuery と Web テクノロジ全体に不慣れです。これまで数週間、node.js/expressjs/jade.js と JQuery で遊んでいます。

何らかの理由で、モーダル ダイアログの作業ができません。次のコードはボタンを示し、ボタンのクリックは「ダイアログ」を示します。このダイアログは、ボタンの上ではなく、ボタンの下の div 要素です。その上、ボタンを移動することはできず、スタイルは JQuery の例に示されているものと同じではありません。

http://jqueryui.com/demos/dialog/

誰かが親切で問題を指摘するか、動作例をコピーして貼り付けてください。ありがとう。

<html>
  <head>
    <title>Places Server</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      jQuery(document).ready( function(){
            jQuery("#myButton").click( showDialog );
                //variable to reference window
                $myWindow = jQuery('#myDiv');

                //instantiate the dialog
                $myWindow.dialog({ height: 350,
                        width: 400,
                        modal: true,
                        position: 'center',
                        autoOpen:false,
                        title:'Hello World'
                        //overlay: { opacity: 0.5, background: 'black'}
                        });
                }

      );
      //function to show dialog   
      var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show(); 
        //open the dialog
        $myWindow.dialog("open");
        }

      //function to close dialog, probably called by a button in the dialog
      var closeDialog = function() {
        $myWindow.dialog("close");
      }
    </script>
  </head>
  <body>     
    <input id="myButton" name="myButton" value="Click Me" type="button"/>
    <div id="myDiv" style="display:none" class="ui-dialog ui-widget ui-widget-content ui-corner-all undefined ui-draggable ui-resizable">
      <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span></div>
      <div id="dialog" class="ui-dialog-content ui-widget-content">
        <p>I am a modal dialog</p>
      </div>
    </div>
  </body>
</html>
4

1 に答える 1

2

動作デモ http://jsfiddle.net/LPeeC/

問題はあなたのクリック イベントでした。あとはデモで遊んでみてください。

これは役立つはずです、:)

コード

$(document).ready( function(){
    jQuery("#myButton").click(function(e){
             showDialog()

             e.preventDefault();
            });
                //variable to reference window
                $myWindow = jQuery('#myDiv');

                //instantiate the dialog
                $myWindow.dialog({ height: 350,
                        width: 400,
                        modal: true,
                        position: 'center',
                        autoOpen:false,
                        title:'Hello World'
                        //overlay: { opacity: 0.5, background: 'black'}
                        });
                }

      );
      //function to show dialog   
      var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show(); 
        //open the dialog
        $myWindow.dialog("open");

        }

      //function to close dialog, probably called by a button in the dialog
      var closeDialog = function() {
        $myWindow.dialog("close");
      }
​
于 2012-07-07T08:36:26.327 に答える