创建可点击按钮，弹出

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;