Question

使用Jquery UI“对话框”小部件我试图动态创建多个模态窗口。

在php循环中，我动态创建将触发模态打开的按钮，以及将成为模态窗口的div。在同一个循环中，我正在做一个echo并编写javascript来处理模态窗口。我的问题是我不知道如何处理编写javascript。目前我没有得到任何我的模态。我应该创建一个函数并通过每个循环迭代调用它，还是应该在每次迭代时发布整个document.ready例程？

    <script type="text/javascript">

            function uiready(a){
   $( "#" + a ).dialog({
            autoOpen: false,
            height: 650,
            width: 625,
            modal: true
 });
 $( "#Button" + a )

            .click(function() {
                $( "#" + a ).dialog( "open" );
            });

          };
        </script> 




     <?php


                //This area should build details buttons if there is a program with an amount greater than $0

               for ($i=1; $i<17; $i++){
                   $ID= $_POST["textfield" . $i];

                   if ($ID!=""){

                        echo '<script type="text/javascript">

                           uiready(' . $i . ');
                    </script>';

                   //build a button with the ID equal the post value
                   echo "<input type=\"button\" value=\" $ID \" id=\"Button" . $i . "\"            class=\"btnmargin\" />";

                   //next build the actual div
                   echo '<div class="printable' . $i . '" id="' . $i . '">
                <table cellspacing="0" cellpadding="10" border="2px">
                //for the sake of space I have not included the entire table markup
                </table>
        </div>';



                   }
                }



                ?>

Answer 1

正如我所看到的，你不需要将JavaScript与PHP混合来做你想要的事情。你只需要给“printable $ 1”div赋予相同的类名（例如“printable”），然后用JS / jQuery完成剩下的工作。添加某事在标记之后这样（未经测试）：

<script type="text/javascript">
$('.printable').each(function() {
    var dialog = $(this);
    dialog.dialog({
        autoOpen: false,
        height: 650,
        width: 625,
        modal: true
    });
    dialog.prev().click(function() { 
        dialog.dialog("open");
    });
}
</script>

Answer 2

我无法使用jquery ui获得多个模态。相反，我使用JQModal并遵循this posts solution

动态创建多个Jquery UI模式对话框，php

2 个答案: