Question

今天我很简单地请您我想做的是激活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>

我也尝试将其指定为函数，并在按钮中添加了onclick()来调用该函数，也没有任何反应。请记住，这是我第一次使用Javascript/jQuery。

Answer 1

我（很高兴）对echo <script>部分表示赞赏。

允许我为您编写一段代码，并附有说明和文档：

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>

说明：

您的按钮需要一个id值。在此示例中称为“ LeButton”。

文档：

https://www.w3schools.com/tags/att_id.asp

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>

说明：

您的标签可以放在页面底部。您的浏览器将“读取”整个页面。通过说“（document）.ready”，您的脚本将在浏览器页面变红后执行。

对于'.click'部分，您可以使用jQuery函数。那么哪个   意思是：一旦单击id属性'LeButton'（＃），jQuery将   执行一个函数，在这种情况下，该函数将alert个文本。

文档：

https://api.jquery.com/click/

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

链接：

https://jquery.com/download/

西蒙·詹森的注解：

您应该详细说明Class属性是用于样式设置的， ID属性可以用于任何代码或识别目的，并且独特。因此，人们应该谨慎对待与事物可能在某些时候发生冲突，因此具有ID属性。 ID属性用于与“ #LeButton”属性进行交互。

Answer 2

无法从客户端运行PHP。如果希望在单击按钮时显示对话框，则必须在将元素发送到客户端时发送该元素，然后再单击它。您应该隐藏对话框元素，直到用户单击按钮。可能是这样的：

count(distinct)

您还可以像这样将onclick属性更改为头部的脚本：

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

我建议您将按钮的<script> $(function() { $(".LeButton").click(function() { $('#dialog').dialog(); }); }); </script>更改为class，然后使用id代替#LeButton

Answer 3

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

Answer 4

您无需使用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>

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

4 个答案: