[英]create clickable button and pop-up
我有“創建用戶”表格,需要幫助。 在我要用戶單擊的鏈接之一上,然后將彈出帶有信息的小彈出窗口,然后他們關閉彈出窗口並繼續填寫表格。 以下是代碼:
<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));
先謝謝您的幫助。
這個給你!
$(document).ready(function() {
$('input[name="number"]').click(function() {
alert('Display your popup here...'); // maybe you should use another js library for popup
});
});
再見!
實際上,您必須使用以下命令在按鈕上添加click事件的偵聽器:
$('input[name="number"]').click(function() {
// Your code here
}
您可以使用著名的JQuery-UI對話框: http : //jqueryui.com/demos/dialog/它非常易於使用。
您可以在主頁中創建框的內容(在顯示為div的div中),或者以前使用ajax調用檢索內容,然后打開包含內容的對話框。
您必須在用戶單擊按鈕時將其綁定(添加一個偵聽器)到該按鈕,以便它可以顯示您的彈出窗口,不要忘記將ID添加到您希望使其可單擊的按鈕或元素,我建議使用此標記:
<a href="#"></a>
$("#button").click(function(e){
e.preventDefault();
$("#popup").show();
});
如果使用標記,則必須添加preventDefault(),以防止瀏覽器更改光標的焦點。
另外,您還必須使用CSS創建“彈出式窗口”,以使其懸浮在網站的其他元素上,因為默認情況下可能會阻止另一個瀏覽器窗口,並且我認為這是一種不好的可用性做法。
不要忘記隱藏彈出框,可以使用具有以下屬性的CSS來做到這一點:
visible:none;
在這里,我已經完成了上述問題的完整解決方案。
演示 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"> </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();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.