-1

これが私がやろうとしていることの簡単な背景です。Web サイトに連絡先フォームがあり、ユーザーが [送信] をクリックしたときに、次のようにします。

  1. ユーザーが送信をクリック
  2. 確認ボックスが開き、免責事項に同意するか同意しないかをユーザーに尋ねます
  3. 同意する場合 = フォームを送信
  4. 同意しない場合 = 確認ボックスを閉じる


これが私が知りたいことです。必ずしも実際のアラート ボックスのスタイルを設定する必要はありません。それが不可能であることはわかっているためです。アラート ボックス内のテキストのスタイルを設定したいのです。「免責事項」。ヘッダータグとボールドタグを追加しようとしましたが、それらはテキストを生成するだけで、実際のスタイルは生成しません。

これが私が使用しているコードです。これは非常に単純なアラート ボックス スクリプトです。より良いアイデアがある場合は、お知らせください。

<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
 {
  window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
 }
  else
 {

 }
}
//-->

HTML:

<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>

また、これに関する別の問題は、ダイアログ ボックスを閉じるだけでなく、スクリプトを続行することです。

4

1 に答える 1

0

アラートのスタイルを設定したり、ボックスを確認したりすることはできません。DHTMLボックスを使用する必要があります。

Impromptuを使用する

これを試してみてください、私はjQuery Impromptuプラグインhttp://trentrichardson.com/Impromptu/を使用しました

デモ： http： //jsfiddle.net/muthkum/4h8cX/6/

完全なコードについては、 http：//fiddle.jshell.net/muthkum/4h8cX/6/show/のページソースを確認してください。

soap.jsを使用する

デモ： http： //jsfiddle.net/muthkum/8qXsv/3/

アップデート：

これがを使用した完全なコードですjQuery Impromptu

ご覧のとおり、私が含めましjquery-1.8.2.jsたjquery-impromptu.4.0.min.js。また、スタイルは以下のコードに含まれています。これがお役に立てば幸いです。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by muthkum</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>    

      <script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>


  <style type='text/css'>
    /*
------------------------------
    Impromptu
------------------------------
*/
.jqifade{
    position: absolute; 
    background-color: #777777; 
}
div.jqi{ 
    width: 400px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    position: absolute; 
    background-color: #ffffff; 
    font-size: 11px; 
    text-align: left; 
    border: solid 1px #eeeeee;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 7px;
}
div.jqi .jqicontainer{ 
    font-weight: bold; 
}
div.jqi .jqiclose{ 
    position: absolute;
    top: 4px; right: -2px; 
    width: 18px; 
    cursor: default; 
    color: #bbbbbb; 
    font-weight: bold; 
}
div.jqi .jqimessage{ 
    padding: 10px; 
    line-height: 20px; 
    color: #444444; 
}
div.jqi .jqibuttons{ 
    text-align: right; 
    padding: 5px 0 5px 0; 
    border: solid 1px #eeeeee; 
    background-color: #f4f4f4;
}
div.jqi button{ 
    padding: 3px 10px; 
    margin: 0 10px; 
    background-color: #2F6073; 
    border: solid 1px #f4f4f4; 
    color: #ffffff; 
    font-weight: bold; 
    font-size: 12px; 
}
div.jqi button:hover{ 
    background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
    background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{ 
    background-color: #BF5E26;
}


  </style>



<script type='text/javascript'>//<![CDATA[ 

function go_there(){

    $.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
       buttons: { Ok: true, Cancel: false}, 
       callback: function(e,v,m,f){
          if(v){
             window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
          }else{

          }
       }
   });

}

//]]>  

</script>


</head>
<body>
  <button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>


</body>


</html>

​
于 2012-11-02T05:38:45.613 に答える