创建对话框的多个实例 [英] Creating multiple instances of dialog box

问题描述

我是jQuery和Java的新手，我真的想尽办法创建对话框的多个实例.我在脑子里用这个:

I'm new to jQuery and java and I'm really trying to get my head round creating multiple instances of a dialog box. I'm using this in the head:

 <script src="external/jquery/jquery.js"></script>
 <script src="jquery-ui.js"></script>

如果我只有1个按钮和一个对话框，它将起作用.但是，当我添加另一个时，它将停止工作.我敢肯定，要解决这个问题很容易.

If I just have 1 button and and dialog box it works. But when I add another it stops working. I'm sure it will be quite easy to fix I'm just struggling.

        <h2>subjects</h2>

        <button id="opener">maths</button>

        <div id="dialog" title="Dialog Title">maths is an important subject.</div> <br> 

      <button id="opener">english</button>

        <div id="dialog" title="Dialog Title">this is also very important</div> <br>

       <script>

        $( "#dialog" ).dialog({ autoOpen: false });
        $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
                                         });
        </script>

推荐答案

http://jsfiddle.net/y7952dmf/

1. ID必须是唯一的，因此必须使用该类才能同时使用其他几个元素
2. 例如，要链接按钮和对话框，请将data-id用于按钮，将id用于具有相同值的对话框

HTML:

<h2>subjects</h2>

<button class="opener" data-id="#dialog1">maths</button>
<div class="dialog" id="dialog1" title="Dialog Title">maths is an important subject.</div>
<br>

<button class="opener" data-id="#dialog2">english</button>
<div class="dialog" id="dialog2" title="Dialog Title">this is also very important</div>
<br>

JQ:

//create all the dialogue
$(".dialog").dialog({
    autoOpen: false
});

//opens the appropriate dialog
$(".opener").click(function () {
    //takes the ID of appropriate dialogue
    var id = $(this).data('id');
   //open dialogue
    $(id).dialog("open");
});

这篇关于创建对话框的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！