こんばんは。
サイトを作っているのですが、アラートやConfirmのボタンの文字列を変更する方法がわかりません。
jQueryでできるという記事を見つけて、コードをコピペしたのですが動作してくれません。
使用している環境は下記の通りです。
○使用OS
・Windows8, Windows7
・Xperia Z4, Xperia Z3
・PlayStation(R)Vita, PlayStation(R)3
○使用サーバー
・FC2ホームページ(JavaScript,jQuery,CSS,C++,Java対応)
○使用プログラム
・JavaScript
・jQuery(ver3.0.0とver1.11.1の両方)

JavaScriptについてはある程度自分で書き換えられるのですが、コピペしたコードが動作しないとなると自分では...
どなたか分かりやすく説明してくれませんか?
また、ダイアログはHTMLとしてではなく、JavaScriptのconfirm()を使用したもの(もしくはそれに似ているもの)が良いです。
参考にしたサイト→http://stacktrace.jp/jquery/ui/widgets/dialog.html

長文失礼しました。

A 回答 (2件)

こんにちは



>ダイアログはHTMLとしてではなく、JavaScriptのconfirm()を使用したもの
>(もしくはそれに似ているもの)が良いです
組み込みの機能を利用する限りは、ボタンの数や機能、文字などを変更することはできません。

それなので、カスタマイズしたダイアログを利用したい場合は、自作で小型の別ウィンドウを作成するか、HTML要素でダイアログ風に見えるものを作成してモーダル(風)に表示することになります。

>jQueryでできるという記事を見つけて、コードをコピペしたのですが動作してくれません。
jQuery利用のものも、HTML要素をモーダル風表示しているものの一種です。
また、ご質問で利用なさろうとしているのはモバイル環境のようですので、jQuery UIではなくjQuery mobailのdialogやpopupを利用すれば動作すると思います。
(通常のjQuery UIのdialogは、モバイル対応していないようです)
http://api.jquerymobile.com/dialog/
http://api.jquerymobile.com/popup/
    • good
    • 0
この回答へのお礼

つまりJavaScriptを利用している以上、拡張プラグインなどを使っても変えられないということですよね。
HTML要素を使って作れるのは知っていたのですが、スマホで閲覧したときにデザインが崩れるのが嫌なのでHTML要素で作るのは避けていたんですよね...

"jQuery mobile"の存在は初めて知りました。
jQueryとCSSを使って頑張ります。

丁寧なご回答有難う御座います。

お礼日時:2017/06/18 02:11

confirmやalertはカスタムできません。


それらしいものと言う意味ではモーダルと呼ばれる処理が妥当です。
ちなみに本来のモーダルは仕様が統一できなかったからか
すでに各ブラウザともサポートを終了している(もしくは終了しようとしている)ため
擬似的なモーダルウィンドウを使用することになります。
適当なモーダル用のライブラリを使ってみて下さい
なお最近はdialogタグがモーダルに変わる仕様に成長しつつあります
    • good
    • 0
この回答へのお礼

JSのアラートはカスタムできないのですね...
HTML要素を使って作ってみます。

ご回答有難う御座います。

お礼日時:2017/06/18 02:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qconfirm の OK、キャンセル 以外の文字を

javascript の confirm  で、OK、キャンセル以外の文字を出す方法を探しています。

「出せません」とか、「showModalDialog を使用し自作のダイアログ」とかしか見つかりません。

JavaScript だけで、出来ないものなのでしょうか?

Aベストアンサー

jQueryUIのDialogでできます。

以下のサイトの下の方に例が載っていて、そのうちDialog3の例で
OK、キャンセル以外の文字を設定しています。
http://stacktrace.jp/jquery/ui/widgets/dialog.html

Javascriptだけで実現していますが、confirmを使っていないので
質問の意図からはずれてるかもしれませんが。

Q要素がランダムに並び替わりません

下記スクリプトでli要素をランダムに並び替えようとしたのですが、
元のリストで上位にある要素が上位に、
下位にある要素が下位に表示される確率が高いです。
(100回再読込しても9が最上位に来たのは2回でした。)
読み込んでいるJQueryはjquery-3.1.0.min.jsです。
よろしくお願いいたします。

<ul id="random">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

<input type="button" value="シャッフル(ページを再読込)"
onclick="location.reload();">
<span class="caution">IEはF5を押してください</span>


<script>
$(function () {
var arr = [];
$("#random li").each(function () {
arr.push($(this).detach());
});
arr.sort(function () {
return Math.random() - Math.random();
});
$("#random").empty();
for (i = 0; i < arr.length; i++) {
$("#random").append(arr[i]);
}
});
</script>

下記スクリプトでli要素をランダムに並び替えようとしたのですが、
元のリストで上位にある要素が上位に、
下位にある要素が下位に表示される確率が高いです。
(100回再読込しても9が最上位に来たのは2回でした。)
読み込んでいるJQueryはjquery-3.1.0.min.jsです。
よろしくお願いいたします。

<ul id="random">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9...続きを読む

Aベストアンサー

こんにちは

シャッフルの方法は違いますが、こんなのではいかがでしょうか?

$(function (){
 var li = $("#random li"), arr = [];
 li.each(function(){arr.push([Math.random(), this]);});
 arr.sort();
 arr.forEach(function(v){$("#random").append(v[1]);});
});

Qjquery ボタンでoff on

下記のような、spanタグの中の文字の表示の切り替えと、その際にidも変更したいと思いますが、

1度ボタンを押すと、html 部分は、<span id="off" >OFF</span> に 正常に切り替わるのですが、2度目にボタンを押すと、そのままで、<span id="on" >ON</span>に戻りません。これはどうしてなのでしょうか?



<script>
$(function(){

$("#btn").click(function(){

if($('#on')){
$('span').html('OFF');
$('span').attr('id','off');
}else{
$('span').html('ON');
$('span').attr('id','on');
}
});

});
</script>

<button id="btn">
<span id="on" >ON</span>
</button>

下記のような、spanタグの中の文字の表示の切り替えと、その際にidも変更したいと思いますが、

1度ボタンを押すと、html 部分は、<span id="off" >OFF</span> に 正常に切り替わるのですが、2度目にボタンを押すと、そのままで、<span id="on" >ON</span>に戻りません。これはどうしてなのでしょうか?



<script>
$(function(){

$("#btn").click(function(){

if($('#on')){
$('span').html('OFF');
$('span').attr('id','off');
}else{
$('span').html('ON');
...続きを読む

Aベストアンサー

こんな風にしてください

$(function(){
$("#btn").on('click',function(){
$(this).find('span').html(function(i,j){
return j=='OFF'?'ON':'OFF';
}).attr('id',function(i,j){
return j=='off'?'on':'off';
});
});
});

QHTMLの画像表示について

こんにちは。
HTMLでwebページサイトを作る練習をしているものです。

以下に質問なのですが、
HTMLを書いていて、参考書の指示通りに画像を挿入しようとしているのですが、
ブラウザで開くとはてなマークが出てしまい、画像が表示されません。

書いているHTMLと同じフォルダに新しくimagesというフォルダを作り、
そのフォルダ内の写真を使おうとして、

<img src="images.logo.png" width= "217" height= "89" alt= "">

を書いてもブラウザ上に画像が表示されず、画像がはてなマークが出てきてしまうのは何故でしょうか?

お答えくださる方がいらっしゃれば幸いです。

宜しくお願い致します。

Aベストアンサー

imagesというフォルダ内にlogo.pngというファイルがあるのでしたら
「images/logo.png」と書きます。
フォルダの中にさらにフォルダがあるときは「フォルダ名/フォルダ名/ファイル名」です。
「/」で区切ることをお忘れなく。
http://masaboo.cside.com/new_html1/ht_67.htm

QjQueryのダウンロードファイルについて

このサイトhttp://bxslider.com/のシートに書かれている<script src="/js/jquery.bxslider.min.js"></script><font></font>と<link href="/lib/jquery.bxslider.css" rel="stylesheet" />をダウンロードしてファイルをhp77と言うフォルダに格納しました。このシートにはhp77と書く必要があるのですか? それとcssのファイルを開いてコピーしたりと、かれこれ4日ほど取り組んでます。ド素人なもので発火する様に手直しをお願いします。

<!DOCTYPE html>
<html lang="ja">

<meta http-equiv="Content-Script-Type" content="text/javascript;

charset=UTF-8">
<head>
<title></title>
<!-- jQuery library (served from Google) --><font></font>
<script

src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<font></font>
<!-- bxSlider Javascript file --><font></font>
<script src="/js/jquery.bxslider.min.js"></script><font></font>
<!-- bxSlider CSS file --><font></font>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script>

</script>
<style>

</style>
</head>

<body>
<ul class="bxslider"><font></font>
<li><img src="/images/pic1.jpg" /></li><font></font>
<li><img src="/images/pic2.jpg" /></li><font></font>
<li><img src="/images/pic3.jpg" /></li><font></font>
<li><img src="/images/pic4.jpg" /></li><font></font>
</ul>
<script>
$(document).ready(function(){<font></font>
$('.bxslider').bxSlider();<font></font>
});
</script>


</body>

</html>

このサイトhttp://bxslider.com/のシートに書かれている<script src="/js/jquery.bxslider.min.js"></script><font></font>と<link href="/lib/jquery.bxslider.css" rel="stylesheet" />をダウンロードしてファイルをhp77と言うフォルダに格納しました。このシートにはhp77と書く必要があるのですか? それとcssのファイルを開いてコピーしたりと、かれこれ4日ほど取り組んでます。ド素人なもので発火する様に手直しをお願いします。

<!DOCTYPE html>
<html lang="ja">

<meta http-equiv="Content-Script...続きを読む

Aベストアンサー

こんにちは

サーバ上でテストするのが一番確実ではありますが・・・

ご提示のHTMLの中に
 <img src="/images/pic1.jpg" />
とありますが、画像は表示できていますよね?
画像等のパス(src属性)の指定方法はご存じでしょうか?
http://www.agr.hokudai.ac.jp/useful/utile/Path_URL.htm

bxslider.min.jsやbxslider.cssを読み込むタグ(<script>や<link>)でも同じ方法で指定します。
(src属性とhref属性の部分です)
この部分に関しては、DLなさった環境と質問者様の環境は違っているはずですので、質問者様がそれぞれのファイルを置いた位置を指定できるように修正する必要があります。

また、念のためjQuryの読み込み部分のsrc属性も、
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
としておいた方が良いかも。
※この掲示板でリンクに変換されてしまわないように、(↑)では先頭の英数字のhを倍幅のhに変えてありますので、英数字に戻す必要があります。

こんにちは

サーバ上でテストするのが一番確実ではありますが・・・

ご提示のHTMLの中に
 <img src="/images/pic1.jpg" />
とありますが、画像は表示できていますよね?
画像等のパス(src属性)の指定方法はご存じでしょうか?
http://www.agr.hokudai.ac.jp/useful/utile/Path_URL.htm

bxslider.min.jsやbxslider.cssを読み込むタグ(<script>や<link>)でも同じ方法で指定します。
(src属性とhref属性の部分です)
この部分に関しては、DLなさった環境と質問者様の環境は違っているはずですので、質問者様...続きを読む

Qjavascript テキストエリアを1行ごとに文字カウントしたい

テキストエリアの文字を1行ごとにカウントさせたいのです。
現在は半角なら0.5、全角なら1.0としてカウントさせて、これを行ごとに分散させたいのです。

未達の条件
・改行、スペースはカウントしない
・各行ごとのカウントになっていない

<!doctype html>
<html>
<head>
<meta charset="euc-jp">
<title>テキストエリアの文字カウント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>

function ShowLength( str ) {
len = 0;
for(i=0;i<str.length;i++) {
var c = str.charCodeAt(i);

if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){
len += 0.5;
}
else { len += 1; }
}
len = parseFloat(len).toFixed(1)
document.getElementById("inputlength01").innerHTML = len;
document.getElementById("inputlength02").innerHTML = len;
document.getElementById("inputlength03").innerHTML = len;
}
</script>
</head>
<body>
<table>
<tr>
<th>行別カウンター</th>
<td>
<textarea id="input_text" placeholder="" name="summary" rows="5" onkeyup="ShowLength(value,'inputlength');"></textarea>
<div class="countWrrap">
<div class="countDsign">
<ul>
<li id="comment01">1行目: <span id="inputlength01">0.0 </span>/ 35</li>
<li id="comment02">2行目: <span id="inputlength02">0.0 </span>/ 35</li>
<li id="comment03">3行目: <span id="inputlength03">0.0 </span>/ 35</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

テキストエリアの文字を1行ごとにカウントさせたいのです。
現在は半角なら0.5、全角なら1.0としてカウントさせて、これを行ごとに分散させたいのです。

未達の条件
・改行、スペースはカウントしない
・各行ごとのカウントになっていない

<!doctype html>
<html>
<head>
<meta charset="euc-jp">
<title>テキストエリアの文字カウント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/j...続きを読む

Aベストアンサー

ANo1です。

う~~~ん・・・

・・とりあえず、
>useNum = str.split(/\r\n|\r|\n/);//これが機能していない感じ
直後にuseNumの内容を調べてみれば、きちんと機能していることがわかると思います。
useNum(=配列)には改行で分割された1行ずつの文字列が取得できます。
通常は、str.split("\n") でも大丈夫だと思いますが、正規表現でもちゃんと動作します。
しかしながら、そのあとの文字チェックのループではもとの全文(str)を対象にループさせているので、なんのために1行ずつに分けたのわかりませんね。

さらには、そのループの中で
>var useNum = new Array();
>useNum.push(len);
としているので、変数宣言に関しては巻き上げられますが、useNum = new Array()の部分は実行されます。
結局、1文字チェックする毎にuseNumを初期化して、それに変数lenをpushしていることになります。
そのあとで、(多分デバッグ用に?)
>console.log(useNum);
となさっていますが、useNumの値は予定通りの内容になっていますか?
この結果、最初に1行ずつに分けたuseNumの内容はすぐに破棄されるので、意味のない処理をしていることになりませんか?

>ShowLength.innerHTML = len.toFixed(1);
ShowLengthは実行中の関数名のはずですが、関数のinnerHTML属性にlen.toFixedの値を代入してどうしようというお考えでしょうか?
(javascriptでは関数もオブジェクトなので、処理自体はエラーにはなりませんが…)

>~~~.innerHTML = useNum[0];
>~~~.innerHTML = useNum[1];
ループの計算でuseNumは初期化されているので、1要素の配列になっているはずです。
また、この値は最後にチェックしたlenの値が入っているはずですが、これを表示したいわけではないと思いますが?
さらに、useNum[1]、 useNum[2]は存在しないので、常にundefinedが出力されるものと想像します。

その他に、
>str = str.replace(/\r\n|\n|\r/g, "");//改行削除
ループ内で毎回処理をしていますが、1度行えばよい処理のはずですので、効率を考えればループの外で処理すべきではないでしょうか?
というよりも、本来なら
>useNum = str.split(/\r\n|\r|\n/)
ですでに改行は取り除かれている文字列を処理するはずなので、不要な処理とも言えます。

HTMLを見てみると、table表示にしていますが、1行2セルのみの構成で、ほとんどの内容が後のセル内にありますが、tableにする意味があるのか疑問です。


などなど、他にもありそうですが・・・
1行ずつ分割したなら、その各行に対して「質問者様がなさりたい文字数計算」を行って、結果をそれぞれの表示用要素に表示するようになさりたいのではないでしょうか?
処理の流れを、もう一度きちんと整理なさってからスクリプトを記述なさった方が良いかもしれません。
また、前回も指摘しましたが、3行決め打ちのスクリプトにしてしまうと、1行しかない時や4行以上ある時に予想外の結果となることがありますので、注意なさった方がよさそうに思います。


なんとなく、なさりたいことが見えてきましたので、似たようなものを作成してみました。
と言っても、全体的に構成をだいぶ変えてしまいましたので、あくまでもご参考としてのものです。
3行までを限定として処理しています。(4行目以降は、存在しても無視)
なお、(どこかに書いてあったように思いますが)スペースの削除はしていません。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
h4 { display: inline-block; }
span.length { margin: 0 0.5em; }
#countWrap { margin-left: 6em; }
</style>

</head>
<body>

<div>
<h4>行別カウンター</h4>
<textarea id="input_text" name="summary" rows="5"></textarea>
</div>

<ul id="countWrap">
<li>1行目:<span class="length">0.0</span>/ 35</li>
<li>2行目:<span class="length">0.0</span>/ 35</li>
<li>3行目:<span class="length">0.0</span>/ 35</li>
</ul>


<script type="text/javascript">

function C(c, c1, c2){ return c >= c1 && c < c2; }

function codeCheck(c){
return C(c,0x0,0x81) || C(c,0xff61,0xffa0) || C(c,0xf8f1,0xf8f4) || (c==0xf8f0);
}

function countLength(s){
var i, len = 0;
for (i=0; i<s.length; i++){ len += codeCheck(s.charCodeAt(i))?1:2; }
return (len/2).toFixed(1);
}


document.getElementById("input_text").addEventListener("keyup", function(){
var i, strs = this.value.split("\n");
var elms = document.querySelectorAll("#countWrap span.length");
for(i=0; i<3; i++){
elms[i].innerHTML = countLength(strs[i] || "");
}
}, false);

</script>
</body>
</html>

ANo1です。

う~~~ん・・・

・・とりあえず、
>useNum = str.split(/\r\n|\r|\n/);//これが機能していない感じ
直後にuseNumの内容を調べてみれば、きちんと機能していることがわかると思います。
useNum(=配列)には改行で分割された1行ずつの文字列が取得できます。
通常は、str.split("\n") でも大丈夫だと思いますが、正規表現でもちゃんと動作します。
しかしながら、そのあとの文字チェックのループではもとの全文(str)を対象にループさせているので、なんのために1行ずつに分けたのわかりませんね。...続きを読む

Qcsvファイルを読み込み、該当項目をhtmlに表示する方法

下記のようなcsvファイルがサーバ上にあり、毎日最新情報に更新されます。
サーバ上の同階層にあるHTMLページに、csvファイルの一部に該当する項目を
表示したいのですが、どのようにしたら実現できるのかわかりません…。
どうか助けてください。よろしくお願いいたします。

■csvファイル(data.csv)
種類,国,売上目標,売上実績,前年売上
りんご,国内,100,90,80
バナナ,国内,100,80,90
りんご,海外,100,110,100
バナナ,海外,100,50,80

■HTMLページ(index.html)
売上達成率【国内】りんご90% (前年比+10) | バナナ80%(前年比-10)
売上達成率【海外】りんご110%(前年比+10)| バナナ50%(前年比-30)

※マイナスになっている場合は赤字にしたいです。

Aベストアンサー

No.5&6です。何も表示されなかったとのことですので、
試しにfc2にアップロードしてみましたので、下記URLでも表示されないでしょうか。

https://fjicode.web.fc2.com/gooqa/9928341/index.html

もし上記サイトでうまく表示されましたら、上記サイトのソース表示から取得した方が手っ取り早いかもしれません。

Qオブジェクト指向の壁

Java言語などは「オブジェクト指向」が売り?だと思うのですが
素人や初心者が、ぶち当たる「オブジェクト指向の壁」って何だと思いますか?

暇な時にでも回答ください。

Aベストアンサー

多分無い
思考停止状態でもプログラミングできるのがオブジェクト指向みたいなものです
まあこれは言いすぎかもですけどw

ただし、しっかりと理解をしようとすると
カプセル化、継承、ポリモーフィズムなど
オブジェクト指向の基本機能が奥が深すぎて難しい気がする

私自身、オブジェクト指向は普段使わないので、説明できないです。
なんとなくこんなものとふんわりと理解はしていますが
正確な説明や、使い道などが全然分かりません

このふんわりとした理解でも使えてしまうのが
オブジェクト指向の欠点
内部の動作を理解できていなくてもプログラムが組めてしまうので
予想外なバグに対応できない初心者が多いみたいです

オブジェクト指向から入ったプログラマーが嫌われがちなのはこういった背景があります

Q最近Javascriptの勉強を始めたのですがどこが違うかわかりません。

プログラミングの経験はないです。JavaScriptの勉強を最近を始め、簡単なじゃんけんのゲームを作っているのですが、プログラミングが作動しない原因はわかりません。間違って居る場所を教えて下さい。



// 数値の設定
var G = 1;
var C = 2;
var P = 3;

// 入力ダイアログ
var user = prompt(G + ':ぐー\n' + C + ':ぱー\n' + P + ':ちょき\n\n' + '※半角で数字を入力してください' );
user = parseFloat(user);

// 入力値のチェック
if (user !== G && user !== C && user !== P) {
alert('入力値を認識できません。再読み込みしてください。');
} else {

// コンピューターの手
var com = Math.floor(Math.random() * 3) + 1;

//コンピューターの手の名前
var comHand = '';
switch (com) {
case G:
comHand = 'ぐー';
break;
case C:
comHand = 'ちょき';
break;
case P:
comHand = 'ぱー';
break;
}
// 結果の判定
var Result = '';
if (user === com) {
Result = '引き分けです。';
} else if ((com === G && user === P) || (com === C && user === G) || (com === P && user === C)) {
Result = 'あなたの勝ちです。';
} else {
Result = 'あなたの負けです。';
}
// 結果の表示
Result = Result 'コンピューターの出した手は「' + comHand + '」でした。' ;
alert(Result);
}

プログラミングの経験はないです。JavaScriptの勉強を最近を始め、簡単なじゃんけんのゲームを作っているのですが、プログラミングが作動しない原因はわかりません。間違って居る場所を教えて下さい。



// 数値の設定
var G = 1;
var C = 2;
var P = 3;

// 入力ダイアログ
var user = prompt(G + ':ぐー\n' + C + ':ぱー\n' + P + ':ちょき\n\n' + '※半角で数字を入力してください' );
user = parseFloat(user);

// 入力値のチェック
if (user !== G && user !== C && user !== P) {
alert('...続きを読む

Aベストアンサー

こんにちは

>プログラミングが作動しない原因はわかりません。
直接の原因は、最後の方の
>Result = Result 'コンピューターの出した手は「' ~~
が、SyntaxErrorになっています。
 Result += 'コンピューターの出した手は「' ~~
 Result = Result + 'コンピューターの出した手は「' ~~
などとしてください。

ブラウザでテストしているなら、F12キーで「開発ツール」が表示できるものが多いですから、これを利用することでエラーを確認することができるはずです。

内容的には、勝ち負けの判定におかしなところがあるようですので、場合分けを再確認してみてください。

Qjavascript初心者です。

javascriptでファイルを別で作成する際の質問です。

<html>
<head>
<script type="text/javascript" src="script.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
</body>
</html>

head内にこのように記述したのですが、
script.jsファイルに記述しても反応がありません。
body内に記述した場合は正常に動作します。
原因として考えられることを教えて頂けると幸いです。

Aベストアンサー

ANo1です。

実際の内容がわからないので、なんとも言えませんが、script.jsの内容を
 alert("OK");
程度のものにしても動作しないでしょうか?
あるいは、ブラウザの開発ツールなどにエラー表示が出ていたりしないでしょうか?


人気Q&Aランキング

おすすめ情報