jQuery-ui对话框不会显示在点击事件上

时间:2017-10-24 08:29:57

标签: javascript jquery jquery-ui jquery-ui-dialog

单击提交按钮时,我的jQuery-ui对话框不显示

html:

<input id="pdfsub" type="button" name="pdfsub" value="PDF">

的Javascript

 $(document).ready(function() {

    $("#PDFdialog").dialog({
        width: 500, autoOpen: false, resizable: false, draggable: false,
        modal: false,
        title: "pdf",
        buttons: [
        {
            text: "Annuler",
            click: function() {
                $( this ).dialog( "close" );
            }
        }]
    });

    $("#pdfsub").click(function(){
        $("#PDFdialog").dialog("open");
        alert("btn");
    });
});
它告诉我我的警报框但不是对话框,我在某个地方犯了错误吗? 还有我的jQuery和jQuery-ui库正在工作(在我的&#34; connexion&#34;页面中使用相同的对话框并且它正常工作)

  

编辑:

有我的图书馆

<script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script> 
<script src="/jquery-ui-1.12.1/jquery-ui.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1 个答案:

答案 0 :(得分:0)

您正在将对话框功能应用于HTML结构中不存在的div,并且您也不能在javascript / jquery中创建它。

所以你必须在你的html中有一个带有该id的元素,这样你就可以在其上调用该对话框

正如您在jQueryUI站点上的示例中所看到的那样 https://jqueryui.com/dialog/

&#13;
&#13;
$(document).ready(function() {

    $("#PDFdialog").dialog({
        width: 500, autoOpen: false, resizable: false, draggable: false,
        modal: false,
        title: "pdf",
        buttons: [
        {
            text: "Annuler",
            click: function() {
                $( this ).dialog( "close" );
            }
        }]
    });

    $("#pdfsub").click(function(){
        $("#PDFdialog").dialog("open");

    });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="pdfsub" type="button" name="pdfsub" value="PDF">
<div id="PDFdialog">
</div>
&#13;
&#13;
&#13;