单击对话框

debugcn 发表于 Dev

用户名

嗨，我试图为我的每个复选框提供一个单击对话框。每个人都会有他们自己的信息。我现在正在尝试创建一个，而我正在尝试创建的是Blue

   <fieldset class="boxoflist">
    <legend>list</legend>
    <li class="field">
        <label class="help">Please select the ones that apply to you</label>
                <label class="listbox " for="check5">
                <input type="checkbox" name="list[]" value="5">

            <span></span>
            Blue
            </label>

                <label class="listbox " for="check1">
                <input type="checkbox" name="list[]" value="1">

            <span></span>

            red
            </label>

                <label class="listbox " for="check6">
                <input type="checkbox" name="list[]" value="6">

            <span></span>

            pink
            </label>

                <label class="listbox " for="check3">
                <input type="checkbox" name="list[]" value="3">

            <span></span>
            Any
            </label>   
    </li>
 </fieldset>



 <div id="Any-helper">
    <p>S'il vous plaît expliquez ci-dessous ce que vous avez idée de couleur dans le mélange, avec une d   escription claire </p>
    </div>

我试过了

   $(function() {
    $(".listbox").click(function(){
        $('#Any-helper').dialog ({
        height: 140,
        modal: true
         });
    });
});

鲁敏

更新：您的问题的工作演示。

在HTML中导入以下脚本：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

查看：

HTML：

<fieldset class="checkbox">
    <legend>list</legend>
    <li class="field">
        <label class="help">Please select the ones that apply to you</label>
                <label class="listbox " for="check5">


            <span></span>
            Blue
            </label>

                <label class="listbox " for="check1">
                <input type="checkbox" name="list[]" value="1" id="blue">

            <span></span>

            red
            </label>

                <label class="listbox " for="check6">
                <input type="checkbox" name="list[]" value="6" id="red">

            <span></span>

            pink
            </label>

                <label class="listbox " for="check3">
                <input type="checkbox" name="list[]" value="3" id="pink">

            <span></span>
            Any
            </label>   
    </li>
</fieldset>




<div id="Any-helper">
<p>S'il vous plaît expliquez ci-dessous ce que vous avez idée de couleur dans le mélange, avec une d   escription claire </p>
</div>

jQuery：

$(function() {

$( "#Any-helper" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true
});
$( "#blue" ).click(function() 
  {
    $( "#Any-helper" ).dialog( "open" );
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。