jQueryのdialogでデータ入力フォームを設置する方法とは?

このQ&Aのポイント
  • jQueryのdialogを使ってデータ入力フォームを設置する方法について教えてください。
  • デモページを参考にしてフォームを作成しましたが、閉じるボタンを非表示にする方法がわかりません。
  • どなたか知っている方がいらっしゃいましたら、教えていただけると助かります。
回答を見る
  • ベストアンサー

jQueryのdialogの件で教えてください。

jQueryのdialogの件で教えてください。 いつもお世話になりますm(__)m データ入力フォームで、jQueryのdialogを使おうと思います。 jQueryのページからダウンロードして、デモページのようなデータ入力用のフォームを設置したところ問題なく動きました。 ※デモページ(jQueryのサイトです) http://jqueryui.com/demos/dialog/modal-form.html このフォームで、右上の閉じる(×)を使えなくしたいと思っています。。 フォームを閉じるのにボタンを使おうと思いますので、×を非表示又は反応しないようにしたいのですが、方法がわかりません(>_<) (×が不要です) どなたかご存じの方がおられましたら、是非ともご教授お願いいたしますm(__)m

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

生成される要素にはそれぞれクラス名が割り当てられていますから 単に非表示にするだけならスタイルシートでどうでしょ。 .ui-dialog-titlebar-close { display: none; }

osaka-aq
質問者

お礼

早速のご回答、ありがとうございますm(__)m まさに考えていた通りになりましたっ!! 有り難うございましたm(__)m

関連するQ&A

  • jQueryのUIのDialogでページ遷移

    jQueryのUIのDialogを使用してログイン画面を作成しています。 http://stacktrace.jp/jquery/ui/widgets/dialog.html 何とかjQueryのUIのDialogを使用してログイン画面を表示する事ができましたが... 下記がソースコードです。 $(document).ready(function(){   $("#dialog:ui-dialog").dialog("destroy");   $("#dialog-form").dialog({     autoOpen: false,     height: "auto",     width: 350,     modal: true,     buttons: {       "ログイン": function() {         ↑       ここに記述         ↓       }     }   }); $("#dialog-form").dialog("open"); }); <DIV id="dialog-form" title="ログイン"> <FORM method="post" action="login.php"> <FIELDSET> <LABEL for="username">ユーザ名</LABEL> <INPUT type="text" name="txtUsername" id="username" class="text ui-widget-content ui-corner-all" /> <LABEL for="password">パスワード</LABEL> <INPUT type="password" name="txtPassword" id="password" value="" class="text ui-widget-content ui-corner-all" /> </FIELDSET> </FORM> </DIV> 行いたい事は下記の通りです。 1.各テキストボックスの入力チェック 2.OKの場合はページ遷移(login.php)して  ※login.htmlで入力された値(ユーザ名、パスワード)をlogin.phpに受け渡す。 3.入力エラーの場合はエラーダイアログを表示。  エラーダイアログのOKボタンをクリックして再度、ログイン入力。 箇条書きで申し訳ありませんがどのように記述すればいいのでしょうか。 また上記の処理を実現するのに参考になるサイトがありましたら教えて下さい。 情けないんですがここ1週間、これで悩んでいます。 藁をもつかむ思いで... 些細な事でも何でも構いませんので宜しくお願いします。

  • jQuery同士の干渉の件で

    わからない事があり、質問させていただきます。 http://ichi-ny.net/test/jquery.validationEngine.nonreload.js と、 http://ichi-ny.net/test/assets/js/main.js http://ichi-ny.net/test/assets/js/util.js http://ichi-ny.net/test/assets/js/skel.min.js が干渉し合って、 http://ichi-ny.net/test/jquery.validationEngine.nonreload.js の中の、 /* * 訂正ボタンを押したとき */ $(document).on('click','#back',function(){ //フォームを表示 $(form).find('input,select,textarea').show(); //確認画面で追加した文字部分を削除 $(".MyMailForm_value").remove(); //labelを表示する $('input[type=\"radio\"]').next('label').show(); $('input[type=\"checkbox\"]').next('label').show(); $(form).find('button').hide(); $("#button_default").show(); }); /* * 送信ボタンを押したとき */ $(document).on('click','#send',function(){ var data = form.serialize(); //フォームの内容を全て取得する $.ajax({ type: "POST", url: "sendmail.php", data: data, async: false, //同期通信に }).done(function(){ form.html('<div class="text-success">メールを送信しました</div>'); }).fail(function(){ form.html('<div class="text-danger">エラーが発生しました</div>'); }); }); が、動作しないのですが、どこが問題でしょうか?? 漠然とした質問で申し訳ございませんが、よろしくご教授のほど、お願いいたします。

  • jquery.cookie.jsの使い方が分かりません。

    jquery.cookie.jsの使い方が分かりません。 Web経験浅く、質問の仕方や内容に不足や不備があるかもしれませんが、ご容赦ください。 入力フォームでcookie.jsを使いたいのですが、どのようにスクリプトを書けばよいのか分かりません。 単純に、入力フォームに入力したデータを保存したいだけなのですが・・・。 いろいろ調べてみたいのですが、分かりやすいソースサンプルを見つけることが出来ず、困っております。 どなたか教えて下さいませんでしょうか? ちなみに、ソースサンプルは以下の通りです。 ------------------------------------------------------------------ <html> <head> <title>テスト</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> ????????????ここのスクリプトをどうしたらよいのか分かりません。 </script> </head> <body onload="getck()"> <form name="input">   性別:<input type="radio" name="sex" value="男性" />男性/      <input type="radio" name="sex" value="女性" />女性<br />   名前:<input type="text" name="name" /><br />   住所:<input type="text" name="add" /><br />   <input type="button" value="記録" onClick="setck()" /><br />   <input type="button" value="呼び出し" onClick="getck()" /><br /> </form> </body> </html> ------------------------------------------------------------------ 上記ソースではボタンクリックで呼び出しとしていますが、実際には、入力したフォームのページ(入力ページ1)とは別のフォームページ(入力ページ2)で、入力データを再利用する作りとなります。 要するに、入力ページ2を呼び出すと、入力ページ1で入力したデータが入力されている、という状態を求めております。 なので、<body onload="getck()">としてあります。 (テストも兼ねたサンプルソースなので、1ファイルで全てチェックできるようにしています) 説明が分かりにくいところもあるかと存じますが、何とぞご教示いただけますよう、宜しくお願い申し上げます。

    • ベストアンサー
    • AJAX
  • Bootstrap Javascriptでモーダル

    Bootstrap で下記のようにモーダルポップアップを使っています。 呼び出される要素の中にテキストボックスを置いているのですが、 入力後、閉じて、再度開くと当然、入力された値が表示されます。 常にテキストボックスの値をクリアしてから表示したいのですが、 javascriptからbasicModalを表示する方法が分かりません。 どのようにすれば良いでしょうか。 <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">選択</a> <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <input id="Text1" type="text" value="" name="gyo_cef" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> </div> </div> </div> </div>

  • フォームからjQuery,jQuery.jsonを使ってJSONを作っ

    フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか? 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。

  • アクセス2000でテーブルの内容を1件1件Form

    テーブルの内容をForm上で1件1件連続で出したい。 たとえばコード番号だけ連続で出して、ボタンを押すと画面が止まって その人の詳細の情報が出る。抽選機みたいなものを 作ろうとしています。MoveNextでデータは進めいているのですが Formに反映されないのです。 recordsetの中身をフォームに反映させるにはどうしたらいいのでしょうか

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている?為なのか; validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • フォームの入力例を表示する件

    jqueryでフォームに何を入力すればいいかを明確にするために下記URLの ソースで試してみました。 http://manuelboy.de/projekte/jquery-formtips/index.php 例は表示されるのですが、そのまま送信ボタンをクリックすると空ではなく 入力例として表示している文字がpostされてしまうようです。 入力チェックはphpで行っています。 教えてgooの質問フォームのように何も入力していなければエラーとしたいのですが そのようなライブラリはありますでしょうか? htmlのsubmitは下記のようにしています。 <input type="image" src="btn_conf.jpg" alt="入力内容を確認" id="submit" name="submit" onclick="this.form.submit(); return false;" />

  • サンプルプログラムの仕様がわかりません

    http://www.ericmmartin.com/projects/simplemodal-demos/ の上から二番目、「Contact Form」とあります。 この「simplemodal-demo-contact-1.4.4.zip」をダウンロードしました。 解凍後、data/contact.phpを開くと、 既定ではフォームのSubjectは入力必須でないため、空欄なら17行目の $subject = "SimpleModal Contact Form"; が自動記入されてメールが送付されてくるように見受けますが、Subjectが空欄のメールが送付されてきます。なぜでしょうか?

    • ベストアンサー
    • PHP
  • Form_Load と Form_Activate のタイミング

    あるデータ入力アプリを作っています。 親フォーム(Form0)で番号を決め、子フォーム(Form1,Form2,Form3,Form4) でデータ入力し、それぞれの子フォームを出るとき(Unload Me) に、変数にsaveしています。それを親フォーム(Form0)で登録を選択したとき、入力データをチェックしてDBに格納しています。 すでにDB格納済のデータの場合、親フォームでDBから変数に読み込み、子フォームのForm_Loadで展開しています。 そこで困っているのは、親と子のフォームを行き来するときにデータの表示で前のが残っていたり、消えてしまったりします。 Form_LoadとForm_Activateを通過するタイミングが、ちゃんと理解できていないためコードの記述位置が不適切なのだと思います。 Form_Load と Form_Activate の実行タイミングについて、お教えください。