私はユーザーがフォームに記入するページを持っています。暗いページ上にモーダルDIVを表示
ユーザーがページ内の特定のテキストボックスをクリックすると、画面を暗くして、チェックボックスと[OK]と[キャンセル]ボタンのリストが表示されるダイアログをポップアップする必要があります。ユーザーが[OK]をクリックすると、チェックされたチェックボックスからテキスト値が取得され、ポップアップが閉じ、メインページが再び明るくなり、クリックされたテキストボックスにコンマ区切りの文字列形式でチェックボックステキストが書き込まれます。
私が気づいている最大の問題は、モーダルポップアップのdivコードです。チェックボックスとテキストボックスの機能は分かりますが、ポップアップが正しく機能するようにはできませんでした。
これを行う簡単な方法はありますか？現在、私がこれを使いこなす前に、すべての入力コントロールを持つ簡単なフォームしかありません。
hereを示すように、モーダルダイアログを使用します。
<!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>
ありがとう、これは素晴らしい！チェックボックスのチェックボックスのテキストに基づいて、クリックされたテキストボックスにデータを書き込むために「OK」ボタンをどのように設定できますか？ –
このようにhttp://jsfiddle.net/Cyberjetx/QGuz8/答えの一部はhttp://stackoverflow.com/questions/786142/how-to-retrieve-checkboxes-values-in-jqueryから来ました –
これを行う最も簡単な方法は、jQuery UIを使用する方法です。これはかなり便利で実装が簡単な「ダイアログ」インターフェースを備えています。
あなたではなく手でそれを行うだろう一方で、それは別の話だ場合：カバーする：
それだけで黒い固定ボックス（固定位置）ですDIVを作成します。ページ。これはあなたの背景になります。最初に表示されていないことを確認してください（表示：なし）
ダイアログを表示する別の固定DIVを作成してください。ブラウザウィンドウの中央にダイアログが表示されるようにスタイルを設定します。
ボタンをクリックしたときに、黒いDIVとダイアログDIVの両方が表示されるように、Javascript（または特殊効果のjQuery）を使用します。
このようにhttp：// jsfiddle。net/8Es24/ –
実際によさそうだよ – Savv
をあなたはちょうどこの目的のために全体の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/
あなたはjQueryのUIを使用しています？ –
はい、私はこのプロジェクトでJQueryを使用しています。 –
[jQuery UI]（http://jqueryui.com）はjQueryの上にあるライブラリです。それがあなたが意味するものなのかそうでないのかは分かりません。それはモーダルダイアログを持っています。人々が手助けをしたい場合は、たとえそれが機能しなくても、あなたが持っているコードを投稿してください。 –