5

ユーザーがフォームに記入するページがあります。複数のテキストボックス、ドロップダウン、チェックボックスなど。

ユーザーがページ内の特定のテキスト ボックスをクリックすると、画面を暗くし、チェックボックスのリストと [OK] ボタンと [キャンセル] ボタンを含むダイアログをポップアップ表示する必要があります。ユーザーが [OK] をクリックすると、チェックされたチェックボックスからテキスト値が取得され、ポップアップが閉じられ、メイン ページが再び明るくなり、クリックされたテキスト ボックスにチェックボックスのテキストがカンマ区切りの文字列形式で書き込まれます。

私が抱えている最大の問題は、モーダル ポップアップ div コードにあります。チェックボックス/テキストボックスの機能は問題なく理解できると確信していますが、ポップアップを正しく機能させることができませんでした。

これを行う簡単な方法はありますか？現在、これをいじり始める前は、すべての入力コントロールを備えた単純なフォームしかありません。

4

3 に答える 3

3

これを行う最も簡単な方法は、jQuery UI を使用することです。非常に便利で実装が簡単な「ダイアログ」インターフェースがあります。

一方、手動で行いたい場合は、別の話です。

  • ページをカバーする黒い固定ボックス (位置: 固定) である DIV を作成します。これがあなたの背景になります。最初は表示されていないことを確認してください（表示を設定：なし）

  • ダイアログを表示する別の固定 DIV を作成します。ダイアログがブラウザ ウィンドウの中央に表示されるようにスタイルを設定します。

  • Javascript (または追加の効果のための jQuery) を使用して、ボタンがクリックされたときに黒い DIV とダイアログ DIV の両方が表示されるようにします。

于 2013-03-27T14:48:42.423 に答える
0

次に示すようにモーダル ダイアログを使用します。

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal confirmation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
  resizable: false,
  height:140,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});
});
</script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">    
</span>These items will be permanently deleted and cannot be recovered. Are you sure?   </p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>
于 2013-03-27T14:55:18.550 に答える
0

この目的のためだけに jquery ui ライブラリ全体を追加したくない場合があります。私が正しければ、あなたならどうするか。

したがって、その入力に「フォーカス」すると、それを「opensModal」と呼びましょう - モーダルを開く必要があります。「長い」コードにもかかわらず、それは非常に単純で、一目瞭然です。実際、そのほとんどは、モーダル/モーダルの外観をよりきれいにするためのものです。どうぞ：

HTML:

<!-- the input -->
<input class="opensModal" type="text" />

<!-- the modal and its overlay -->
<div class="modalOverlay is-inactive">
    <div class="modal">
        <input type="checkbox" />
        <input type="checkbox" />
        <button>Ok</button>
        <button>Cancel</button>
    </div>
</div>

CSS:

.modalOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: 0.6s;
}

.modalOverlay.is-inactive {
    visibility: hidden;
    background: rgba(0, 0, 0, 0);
}

.modalOverlay.is-active {
    visibility: visible;
    background: rgba(0, 0, 0, 0.4);
}

.modal {
    margin: 100px auto;
    background: #fff;
    width: 100px;
    padding: 20px;
    -webkit-transition: 0.4s 0.6s;
}

.modalOverlay.is-inactive .modal {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.1);
}

.modalOverlay.is-active .modal {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
}

JQUERY(ジャバスクリプト)

(function () {
    var $modal = $('.modalOverlay'),
        openModal = function () {
           $modal
               .removeClass('is-inactive')
               .addClass('is-active');
        },
        closeModal = function () { //use it wherever you want
            $modal
               .removeClass('is-active')
               .addClass('is-inactive');
        },
        onDocReady = function () {
            $('.opensModal').on('focus', openModal);
        };

    $(onDocReady);
})();

ここにフィドルがあります：http://jsfiddle.net/2edPZ/3/

于 2013-03-27T14:55:53.587 に答える