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 回答