激活弹出窗口（HTML、PHP、Javascript/Jquery）_Javascript_Php_Jquery

激活弹出窗口（HTML、PHP、Javascript/Jquery）

javascript php jquery

激活弹出窗口（HTML、PHP、Javascript/Jquery）,javascript,php,jquery,Javascript,Php,Jquery,今天我有一个简单的请求给你们。我想做的是激活PHP标签中的一个弹出窗口。我已经测试过弹出窗口是否能够自行工作，它确实可以。我的问题是按钮，我在其他地方使用了相同的设置，但这次没有雪茄。我也试着在PHP标记中回显按钮，但什么也没发生我的代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="te

今天我有一个简单的请求给你们。我想做的是激活

PHP

标签中的一个弹出窗口。我已经测试过弹出窗口是否能够自行工作，它确实可以。我的问题是按钮，我在其他地方使用了相同的设置，但这次没有雪茄。我也试着在

PHP

标记中回显按钮，但什么也没发生

我的代码：

<!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>

<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>

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


咔嚓咔嚓！
我（善意地）谈论了一下echo的部分
请允许我为您编写一段代码，包括解释和文档：
HTML按钮：
<!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>

<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>

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

说明：
您的标签可以放在页面底部。您的浏览器将“读取”整个页面。通过说“（document）.ready”，一旦页面被浏览器染成红色，脚本就会被执行
对于“.click”部分，可以使用jQuery函数。那是什么
意思是：单击id
属性“LeButton”（#）后，jQuery将
执行一个函数，在这种情况下，该函数将发出警报
文本
文件：

注意：确保包含/启用了jQuery

链接：


西蒙·詹森的说明：

您应该详细说明Class属性用于样式设置和
Id属性可以用于任何代码或标识目的，并且
独一无二。因此，人们是否应该小心使用
Id属性，因为某些情况下可能会发生冲突。ID属性
用于与“#LeButton”属性交互
我（善意地）就echo
部分发表了一点看法
请允许我为您编写一段代码，包括解释和文档：
HTML按钮：
<!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>

<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>

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

说明：
您的标签可以放在页面底部。您的浏览器将“读取”整个页面。通过说“（document）.ready”，一旦页面被浏览器染成红色，脚本就会被执行
对于“.click”部分，可以使用jQuery函数。那是什么
意思是：单击id
属性“LeButton”（#）后，jQuery将
执行一个函数，在这种情况下，该函数将发出警报
文本
文件：

注意：确保包含/启用了jQuery

链接：


西蒙·詹森的说明：

您应该详细说明Class属性用于样式设置和
Id属性可以用于任何代码或标识目的，并且
独一无二。因此，人们是否应该小心使用
Id属性，因为某些情况下可能会发生冲突。ID属性
用于与“#LeButton”属性交互
无法从客户端运行PHP。如果希望在单击按钮时显示对话框，则必须在单击元素之前，在将其发送到客户端时发送该元素。在用户单击按钮之前，应该隐藏对话框元素。可能是这样的：
<!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>


咔嚓咔嚓！
图片：

您还可以在头部将onclick属性更改为脚本，如下所示：
<script>
    $(function() {
        $(".LeButton").click(function() {
            $('#dialog').dialog();
        });
    });
</script>


$（函数（）{
$（“.LeButton”）。单击（函数（）{
$（'#dialog'）。dialog（）；
});
});

我建议您将按钮的类更改为id
，然后使用#LeButton
而不是。LeButton
无法从客户端运行PHP。如果希望在单击按钮时显示对话框，则必须在单击元素之前，在将其发送到客户端时发送该元素。在用户单击按钮之前，应该隐藏对话框元素。可能是这样的：
<!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>

<!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>


咔嚓咔嚓！
图片：

您还可以在头部将onclick属性更改为脚本，如下所示：
<script>
    $(function() {
        $(".LeButton").click(function() {
            $('#dialog').dialog();
        });
    });
</script>


$（函数（）{
$（“.LeButton”）。单击（函数（）{
$（'#dialog'）。dialog（）；
});
});

我建议您将按钮的类更改为id
，然后使用#LeButton
而不是。LeButton

<!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>


加载html页面时，未设置$_POST['LeButton']。因此，不会在页面中生成所需的对话框。为了设置$_POST['LeButton']，应该首先将其传递到html页面，因此我添加了表单
或者，您可以选择一个完整的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>


.hidden{显示：无}
咔嚓咔嚓！

这是用于显示信息的默认对话框。
可以使用“x”图标移动、调整和关闭对话框窗口。

函数showDialog（）{
$（“#dialog”）.dialog（）；
};


加载html页面时，未设置$_POST['LeButton']。因此，不会在页面中生成所需的对话框。为了设置$_POST['LeButton']，应该首先将其传递到html页面，因此我添加了表单
或者，您可以选择一个完整的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>


.hidden{显示：无}
咔嚓咔嚓！

这是用于显示信息的默认对话框。
可以使用“x”图标移动、调整和关闭对话框窗口。

函数showDialog（）{
$（“#dialog”）.dialog（）；
};
您可以在客户端处理此问题，而无需使用PHP。为此，您需要为按钮指定唯一标识符，以便无论何时单击按钮，都可以使用简单的evenlisener打开对话框，如：

var dialog=$（“#dialog form”）.dialog({
自动打开：错误，
身高：400，
宽度：350，