用JQuery UI打开对话框

我想在用户点击一个链接时打开一个JQuery UI对话框。到目前为止，我有这个用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>

来源

2011-09-07 Michiel

萤火虫主机中的任何错误？很难看出你提供的信息有什么错误...... –

有时你使用'$'，有时候使用'$ j'。这是故意的吗？ – chelmertz

@chelmertz，是的。我有冲突的图书馆。这就是为什么我有时使用$ j – Michiel

你引用的jQuery和jQuery UI库？在初始化时，可以自动隐藏：

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


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

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

来源

2011-09-07 20:20:50

一个有用的链接，正是我想要实现的，但太糟糕了。不工作:(虽然我抄到底发生了链接上注明... – Michiel

做任何事情发生？你有jQuery和jQuery的UI页面上引用？ –

我想是这样，看到我的编辑在原来的职位... – Michiel

你的问题是你试图访问该对话框打开方法，即使你从来没有创建对话框实例。

只要改变你的代码，这样做：

$('#dialog').dialog()

如果你阅读文档：http://jqueryui.com/demos/dialog/，它的魔法，为你，你也将看到它会打开默认的初始调用。

来源

2011-09-07 20:25:04 Aknosis

是的，我阅读手册。我希望div在初次通话时关闭，并在用户单击按钮时打开... – Michiel

如果是这种情况，Spencerooni的答案应该可以解决您的问题。您需要先初始化它，然后点击打开它。 – Aknosis

是的，链接正是我所需要的。但由于某种原因，这不起作用... – Michiel

通知对话框函数，如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");

来源

2014-01-16 13:44:08 Belabu

您可以使用此代码对你的目的。

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

希望它可以帮助你。如果您有任何疑问，请让我知道。

来源

2016-10-11 08:32:38

用JQuery UI打开对话框

回答

相关问题