用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打開對話框

回答

相關問題