1

「ユーザーの作成」フォームがあり、ちょっとした助けが必要でした。ユーザーにボタンをクリックしてもらいたいリンクの1つで、小さなポップアップに情報が表示され、ポップアップを閉じてフォームへの入力を続けます。以下はコードです：

<div class="users form">
<?php
    echo $this->Form->create('User', array (
            'type' => 'post',
            'inputDefaults' => array (
                'div' => false
            )
        )       
    );
?>
<script>
    $(document).ready(function() {
        $('#UserFirstName').focus();
    });
</script>
<fieldset>
    <legend></legend>
    <h2>Registration</h2>
    <?php
        echo $this->Form->input('firstName');
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('lastName');
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('username');
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('password', array ('class' => 'short'));
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('password_confirm', array('type' => 'password', 'label' => 'Confirm Password:   ', 'class' => 'short'));
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('email', array('label' => 'Email:   ', 'default' => $email));
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('id', array('label' => 'id: ', 'type' => 'hidden', 'default' => 37));
        $qmark = $this->Html->image('qmark.png', array('height' => 15));
        echo '<div class=\'clear\'></div>';
        echo $this->Form->input('number', array('label' => 'Number:', 'class' => 'short', 'after' => $qmark));
        echo '<div class=\'clear\'></div>';
    ?>

ユーザーがqmarkボタンをクリックすると、そのフィールドの定義を含む小さなウィンドウがポップアップします。 

echo $this->Form->input('number', array('label' => 'Number:', 'class' => 'short', 'after' => $qmark));

助けてくれてありがとう。

4

4 に答える 4

0

ここで私は上記の問題の完全な解決策を実行しました。

デモ http://codebins.com/bin/4ldqp6y

HTML

<input type="button" id="btnSignUp" value="SignUp" />
<div id="popup">
  <div id="popupinfo">
    <p> Now, your registration form has been loaded...! </p>
    <p> You have field your required fields and submit form.</p>
    <p class="button"><a href="javascript:void(0);">OK</a></p>
  </div>
</div>
<div id="registerDiv">
  <p class="required">Fields with Mark (*) are required fields </p>
  <form name="frmregister" id="frmregister" method="post" action="#registerDiv">
    <table cellpadding="0" cellspacing="0" class="table" border="0">
      <tr>
        <td>*Name:</td>
        <td><input type="text" class="input" size="17" /></td>
      </tr>
      <tr>
        <td>*Username:</td>
        <td><input type="text" class="input" size="17" /></td>
      </tr>
      <tr>
        <td>*Password:</td>
        <td><input type="password" class="input" size="17" /></td>
      </tr>
      <tr>
        <td>*Confirm Password:</td>
        <td><input type="password" class="input" size="17" /></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" class="input" size="17" /></td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr> 
       <tr>
         <td colspan="2" align="center"><input type="submit" value="Register" id="btnsubmit" /></td>
       </tr>
    </table>
  </form>
</div>

CSS

.input{
  border:1px solid #333;
}
.required{
  color:red;
  font-size:12px;
}

#registerDiv{
  display:none;
  margin-top:10px;
  margin-left:20px;
  border:2px solid #333;
  padding:3px;
  background:#cdcdcd;
  width:280px;
  text-align:center;
}
#popup{
  display:none;
  padding:10px;
  background:#969696;
  position:absolute;
  top:25%;
  left:25%;
  z-index: 99999;
  opacity:100%;

}
#popupinfo{
  padding:2px;
  text-align:center;
  background:#cfcfcf;
}
#popupinfo p{
  font-size:14px;
}

#popupinfo .button {
  text-align:center;
}
#popupinfo .button a{
  text-decoration:none;
  border:1px solid #333;
  width:20px;
  padding:5px;
  background:#1A1A1A;
  color:#eee;
}

#popupinfo .button a:hover{
  background:#eee;
  color:#1a1a1a;
}

#mask{

  background: #000;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 999;

}

jQuery

$(function() {
    $("#btnSignUp").click(function() {
        $("#registerDiv").fadeIn(300);
        $("body").append("<div id='mask'></div>");
        $("#mask").fadeIn(300);
        $("#popup").fadeIn(300);
    });
    $("#popup .button a").click(function() {
        $("#popup").fadeOut(300, function() {
            $("#mask").remove();
        });
        $("#frmregister").find("input:first").focus();
    });
});

デモ http://codebins.com/bin/4ldqp6y

于 2012-09-28T11:16:53.843 に答える
0

ユーザーがボタンをクリックしたときにボタンにバインド（リスナーを追加）してポップアップを表示できるようにする必要があります。クリック可能にするボタンまたは要素にIDを追加することを忘れないでください。このタグを使用することをお勧めします。

<a href="#"></a>

$("#button").click(function(e){
    e.preventDefault();
    $("#popup").show();
});

タグを使用する場合は、ブラウザがカーソルのフォーカスを変更しないように、preventDefault（）を追加する必要があります。

また、CSSを使用して「ポップアップ」を作成し、サイトの他の要素の上に浮かぶ必要があります。これは、別のブラウザウィンドウがデフォルトでブロックされる可能性があり、使い勝手が悪いと考えているためです。

ポップアップボックスを非表示にすることを忘れないでください。次のプロパティを使用してCSSで非表示にすることができます。

visible:none;
于 2012-09-28T05:07:47.977 に答える
0

はい、どうぞ！

    $(document).ready(function() {

       $('input[name="number"]').click(function() {

          alert('Display your popup here...'); // maybe you should use another js library for popup
      });
    });

さようなら！

于 2012-09-28T04:45:47.173 に答える
0

実際、以下を使用して、ボタンにクリック イベントのリスナーを追加する必要があります。

$('input[name="number"]').click(function() {
    // Your code here

}

有名な JQuery-UI ダイアログ ボックスを使用できます: http://jqueryui.com/demos/dialog/ 非常に使いやすいです。

メイン ページ (display: none スタイルの div 内) でボックスのコンテンツを作成するか、事前に ajax 呼び出しでコンテンツを取得してから、コンテンツを含むダイアログ ボックスを開くことができます。

于 2012-09-28T04:52:56.320 に答える