代码之家 › 专栏 › 技术社区 › D3nj1

激活弹出窗口(HTML、PHP、javascript/jquery)

jquery php javascript

D3nj1 · 技术社区 · 6 年前

我今天有一个简单的请求给你脑筋。我要做的是激活里面的弹出窗口 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 .

4 回复 | 直到 6 年前

Ronnie Oosting 6 年前

我(和蔼地)谈到 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 您可以使用的功能。所以哪个意思是:曾经 身份证件 单击属性“lebutton”(), JQuery 将执行一个函数,它将 alert 本例中的文本。

文档:

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

注: 确保你有 JQuery 包括/启用。

链接:

https://jquery.com/download/

西蒙·詹森的笔记:

您应该详细说明class属性是用于样式和 ID属性可以用于任何代码或标识目的,并且独特的。因此,人们应该谨慎地使用 ID属性,因为某些情况下可能会发生冲突。ID属性用于与“lebutton”属性交互。

altrisi 6 年前

无法从客户端运行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>

我建议你换一下 class 按钮的 id ,然后使用 #LeButton 而不是 .LeButton

Amr Aly 6 年前

您可以在客户端处理此问题,而无需使用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>

C. van Dorsten 6 年前

<!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页面时,未设置“$\u Post['leButton']。因此,页面中将不会生成预期的对话框。为了设置$\u 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>