Question

我想在用户点击链接时打开JQuery UI对话框。到目前为止我有这个

<script>
    //to hide the dialog box on loading
    $j(function() {
        $j( "#dialog" ).hide();
    });

    $('.button').click(function(){
        $('#dialog').dialog('open');
    });
</script>

<div id="dialog" title="Basic dialog">
    <p>Dialog box</p>
</div>

<a href="#" class="button">The button</a>

但是单击链接无法打开对话框......一切都包含在内。

修改

<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
    var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>

Answer 1

您是在引用jQuery和jQuery ui库吗？初始化时可以自动隐藏：

$("#dialog").dialog({ autoOpen: false });


$('.button').click(function() {
    $('#dialog').dialog('open');
});

演示：http://jsfiddle.net/pxQ8j/

Answer 2

您可以将此代码用于您的目的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind", 
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <form action="" method="post"> 
    Name  :- <input type="text" name="name" value="">
    Email :-<input type="email" name="email" value="">
    Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
  </form>
</div>

<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>

</body>
</html>
<script type="text/javascript">
  function myfuncation()
  {

      // Here is your ajax request to db related work.

      var ajaxresponce = "Sucessfully Insert Form";
      $('#dialog-message').html(ajaxresponce);
      $( "#dialog-message" ).dialog();

  }
</script>

希望它对你有所帮助。如果您有任何疑问，请与我们联系。

Answer 3

您的问题是，即使您从未创建过对话框实例，也正在尝试访问对话框打开方法。

只需更改您的代码：

$('#dialog').dialog()

如果您阅读了文档：http://jqueryui.com/demos/dialog/，它会为您解释，您也会看到它在初始调用时默认打开。

Answer 4

通知对话框功能，如alert（）。

function msgbox(text,buttontext) {
    buttontext = buttontext || "OK"
    $( "<div>" + text + "</div>" ).dialog({
      dialogClass: "no-close",
      buttons: [
        {
          text: buttontext,
          click: function() {
            $( this ).dialog( "close" );
            $(this).remove();
          }
        }
      ]
    });
}

通话功能

msgbox("test dialog");

或

msgbox("test dialog", "I agree");

Answer 5

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind", 
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <form action="" method="post"> 
    Name  :- <input type="text" name="name" value="">
    Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>

Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
    
  </form>
</div>

<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();

function myfuncation()
  {
alert("hai");
      // Here is your ajax request to db related work.
$( "#test" ).show();
      //var ajaxresponce = "Sucessfully Insert Form";
      //$('#dialog-message').html(ajaxresponce);
     // $( "#dialog-message" ).dialog();

  }
</script>

使用JQuery UI打开对话框

5 个答案: