Question

首先，我是JQuery和Web技术的新手。到目前为止，我几周都在使用node.js / expressjs / jade.js和JQuery。

出于某种原因，我无法获得模态对话框的工作。下面的代码显示按钮和按钮单击显示“对话框”。此对话框只是按钮下面的div元素，而不是按钮。最重要的是你无法移动按钮和样式与JQuery示例中显示的不同。

有人可以善待并指出问题或复制粘贴工作示例。感谢。

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

Answer 1

工作演示 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");
      }

JQuery模态对话框的行为与示例中的不同

1 个答案: