創建可點擊按鈕，彈出

Question

我有「創建用戶」的形式，需要豆蔻幫助。當時我想用戶點擊該按鈕，然後彈出的小將會彈出信息的鏈接之一，那麼，它們將關閉彈出窗口，並繼續填寫表單。以下是代碼：

<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和小窗口會彈出與該領域的definatation。

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

在此先感謝您的幫助。

Answer 1

在這裏，我已經做了上述問題的完整解決方案。

演示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

Answer 2

給你！

$(document).ready(function() { 

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

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

Byee！

Answer 3

事實上，你必須使用添加按鈕點擊事件的監聽器：

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

} 

您可以使用著名的jQuery的用戶界面對話框：http://jqueryui.com/demos/dialog/ 這是非常容易使用。

您可以在主頁面（在帶有display：none樣式的div中）創建框的內容，或者之前使用ajax調用來檢索內容，然後用內容打開對話框。

Answer 4

當用戶點擊它時，你必須綁定（添加一個監聽器），這樣它可以顯示你的彈出窗口，不要忘記添加ID到你想點擊的按鈕或元素，我建議使用此標籤：

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

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

如果使用標籤，則必須添加preventDefault（），以防止瀏覽器更改光標的焦點。

你也必須創建「彈出」使用CSS漂浮在該網站的其他元素，因爲另一個瀏覽器窗口會被默認阻止可能，我認爲它是一個糟糕的可用性實踐。

不要忘記隱藏彈出框，你可以做到這一點與下列財產CSS：

visible:none;