激活弹出窗口（HTML，PHP，Javascript / Jquery）
[英]Activating popup (HTML,PHP,Javascript/Jquery)
问题描述
I have a simple request for you brainies today. 
今天我有一个简单的要求，请您大白。 What i am trying to do is to activate a pop-up inside PHP tags. 我想做的是激活PHP标记内的弹出窗口。 I have tested to see if the pop-up works by itself, and it does. 我已经测试了弹出窗口是否可以单独运行，并且可以正常运行。 My problem is the button, i have used the same setup elsewhere, but this time no cigar. 我的问题是按钮，我在其他地方使用了相同的设置，但是这次没有雪茄。 I have also tried echoing the button inside the PHP tags but nothing happens. 我也尝试过在PHP标记中回显按钮，但没有任何反应。
My code: 我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. 我也尝试将其指定为函数，并在按钮上添加了onclick()来调用该函数，也没有任何反应。 Mind that this is the first time i am ever using Javascript/jQuery . 请注意，这是我第一次使用Javascript/jQuery 。
4 个解决方案
解决方案1
4 已采纳 2018-08-14 11:15:42
I (kindly) lauched a bit about the echo <script> part. 我（有点）对echo <script>部分表示赞赏。
Allow me to write you a piece of code, with explanation and documentation: 请允许我为您编写一段代码，并附上说明和文档：
HTML button: HTML按钮：
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
& 和
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation: 说明：
Your button needs an
idvalue.id值。 Which is called 'LeButton' in this example.
Documentation: 说明文件：
https://www.w3schools.com/tags/att_id.asp
jQuery part: jQuery部分：
<script>
jQuery(document).ready(function() {
/**
* @version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation: 说明：
Your tag can be placed on the bottom of your page.
For the '.click' part it's a
jQueryfunction you can use.jQuery函数。 So which means: onceidattribute 'LeButton' (#) is clicked,jQuerywill execute a function, which willalerttext in this case.id属性'LeButton'（＃），jQuery将执行一个函数，在这种情况下，该函数将alert文本。
Documentation: 说明文件：
Note: Make sure you have jQuery included/enabled. 注意：确保已包含/启用了jQuery 。
Link: 链接：
Note from Simon Jensen: 西蒙·詹森（Simon Jensen）的注释：
- You should elaborate that the Class-attribute is for styling and the Id-attribute can be for whatever code or identifying purposes and are unique. 您应该详细说明Class属性是用于样式的，而Id属性可以是用于任何代码或标识目的的，并且是唯一的。 Therefore should people be careful with styling with the Id-attribute as things might conflict at some point. 因此，人们应该谨慎对待带有ID属性的样式，因为在某些时候情况可能会发生冲突。 The ID-attribute is used to interact with the "#LeButton" attribute. ID属性用于与“ #LeButton”属性进行交互。
解决方案2
1 2018-08-14 11:23:34
The PHP can't be run from the client. 无法从客户端运行PHP。 If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. 如果希望在单击按钮时显示对话框，则必须在将元素发送到客户端时发送该元素，然后再单击它。 You should have the dialog element hidden until the user clicks the button. 您应该隐藏对话框元素，直到用户单击按钮。 It could be something like: 可能是这样的：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this: 您也可以将onclick属性更改为头部的脚本，如下所示：
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id , and then using #LeButton instead of .LeButton 我建议您更改id的按钮class ，然后使用#LeButton代替.LeButton
解决方案3
1 2018-08-14 11:30:32
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. 加载html页面时，未设置$ _POST ['LeButton']。 Therefore the intended dialog box wil not be generated in the page. 因此，预期的对话框将不会在页面中生成。 In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added. 为了设置$ _POST ['LeButton']，您应该首先将其传递到html页面，因此是我添加的表单。
Alternatively you could go for a full javascript solution like so: 另外，您可以使用完整的javascript解决方案，例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>
解决方案4
1 2018-08-14 11:34:40
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so: 您可以在客户端进行此操作而无需使用PHP，因此您需要为按钮提供唯一的标识符，因此，每当单击按钮时，都可以使用简单的evenlisener打开对话框，如下所示：
var dialog = $( "#dialog-form" ).dialog({ autoOpen: false, height: 400, width: 350, modal: true, close: function() { // do stuff here whenever you close your dialog } }); document.getElementById('my-button').addEventListener('click', function () { dialog.dialog('open'); });
#dialog-form { background-color: #ccc; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button> <div id="dialog-form"> Name: <input><br/> Password: <input type="passowrd"> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.