クリックダイアログボックスで

debugcn 投稿 Dev

user3057514

こんにちは私は各ティックボックスにクリック時のダイアログボックスを表示しようとしています。それぞれにメッセージがあります。私は今のところそれを作成しようとしています、そして私がそれをしようとしているのは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]