激活弹出窗口(HTML,PHP,Javascript / Jquery)

我今天有一个简单的请求。 我想要做的是激活 PHP </ code>标签内的弹出窗口。 我已经测试过弹出窗口是否可以自行工作,而且确实如此。 我的问题是按钮,我在其他地方使用了相同的设置,但这次没有雪茄。 我也试过回显 PHP </ code>标签内的按钮,但没有任何反应。 </ p>

我的代码:</ strong> </ p>

 &lt;!doctype html&gt; 
&lt; html lang =“en” &gt;
&lt; head&gt;

&lt; meta charset =“utf-8”/&gt;
&lt; link rel =“stylesheet”type =“text / css”href =“Lib \ JqueryUIcss.css” &gt;
&lt; script src =“Lib \ Jquerylib.js”&gt;&lt; / script&gt;
&lt; script src =“Lib \ JqueryUI.js”&gt;&lt; / script&gt;

&lt; / head&gt;
&lt; body&gt;

&lt; button type =“button”class =“LeButton”&gt; Clicky Clicky!&lt; / button&gt;

&lt;?php
if(isset($ _ POST ['LeButton'])){

echo'&lt; script&gt; $(function(){$(“#dialog”)。dialog();}); &lt; / script&gt;';
echo'&lt; div id =“dialog”title =“Basic dialog”&gt;';
echo'&lt; p&gt; Image:&lt; / p&gt;'; &lt; / div&gt;';}
?&gt;
&lt; / body&gt;
&lt; / html&gt;
</ code> </ pre>

我尝试将其指定为函数aswell 并将 onclick()</ code>添加到按钮以调用该函数,也没有任何事情发生。 请注意,这是我第一次使用 Javascript / jQuery </ code>。</ p>
</ div>

展开原文

原文

I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. 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.

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. Mind that this is the first time i am ever using Javascript/jQuery.

dsxml2169
dsxml2169 最后一个回声无效。最后一个</div>应该会给你一个语法错误。
大约 2 年之前 回复

4个回答

I (kindly) lauched a bit about the echo <script> part.

Allow me to write you a piece of code, with explanation and documentation:

HTML button:

<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 id value. Which is called 'LeButton' in this example.

Documentation:

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

jQuery part:

<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. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.

For the '.click' part it's a jQuery function you can use. So which means: once id attribute 'LeButton' (#) is clicked, jQuery will execute a function, which will alert text in this case.

Documentation:

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

Note: Make sure you have jQuery included/enabled.

Link:

https://jquery.com/download/


Note from 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. Therefore should people be careful with styling with the Id-attribute as things might conflict at some point. The ID-attribute is used to interact with the "#LeButton" attribute.
douhuifen9942
douhuifen9942 别客气 :)
大约 2 年之前 回复
dongpin1059
dongpin1059 很好的解释@SimonJensen。 我会加上它!
大约 2 年之前 回复
doutao6380
doutao6380 不,我不使用bootstrap :-)
大约 2 年之前 回复
douniwan_0025
douniwan_0025 您应该详细说明Class属性用于样式,Id属性可以用于任何代码或识别目的,并且是唯一的。 因此,人们应该小心使用Id属性进行样式设置,因为事情可能会在某些时候发生冲突。 ID属性用于与“#LeButton”属性交互。
大约 2 年之前 回复
duandou9931
duandou9931 这是非常好的解释,但为什么按钮需要ID值? 另外一个alert()不是一个选项,因为它无法显示图像:-)
大约 2 年之前 回复



 &lt;!doctype html&gt; 
&lt; html lang =“en”&gt;
&lt; head&gt;
\ n&lt; meta charset =“utf-8”/&gt;
&lt; link rel =“stylesheet”type =“text / css”href =“Lib \ JqueryUIcss.css”&gt;
&lt; script src =“ Lib \ Jquerylib.js“&gt;&lt; / script&gt;
&lt; script src =”Lib \ JqueryUI.js“&gt;&lt; / script&gt;

&lt; / head&gt;
&lt; body&gt;
\ n&lt; form action =“index.php”method =“POST”enctype =“multipart / form-data”&gt;
&lt; input type =“hidden”name =“LeButton”value =“an_arbitraty_value”&gt;
&lt; input type =“submit”class =“LeButton”&gt;
&lt; / form&gt;

&lt;?php
if(isset($ _ POST ['LeButton'])){

echo'&lt; div id =“dialog”title =“基本对话框”&gt;';
echo'&lt; p&gt;图片:&lt; / p&gt;&lt; / div&gt;';

}
?&gt;
&lt; / body&gt ;
&lt; / html&gt;
</ code> </ pre>

当您加载html页面时,未设置$ _POST ['LeButton']。 因此,不会在页面中生成预期的对话框。 为了设置$ _POST ['LeButton'],你应该首先将它传递给html页面,因此我添加了表单。</ p>

或者你可以选择一个完整的javascript解决方案 所以:</ p>

 &lt;!doctype html&gt; 
&lt; html lang =“en”&gt;
&lt; head&gt;

&lt; meta charset =“utf- 8“/&gt;
&lt; link rel =”stylesheet“href =”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css“&gt;
&lt; style&gt;
.hidden {display:none}
&lt; / style&gt;

&lt; script src =“https://code.jquery.com/jquery-1.12.4.js”&gt;&lt; / script&gt;
&lt; script src =“https://code.jquery.com /ui/1.12.1/jquery-ui.js"></script>

</head>
<body>

<button type =“button”class =“LeButton”onclick =“showDialog();”&gt;
点击Clicky!
&lt; / button&gt;

&lt; div id =“dialog”title =“基本对话框”class =“hidden”&gt;

&lt; p&gt;

这是默认对话框,可用于显示信息。

可以使用“x”图标移动,调整大小和关闭对话框窗口。
&lt; / p&gt;

&lt; / div&gt;

&lt; script&gt;
function showDialog(){
$(“#dialog”)。dialog();
};
&lt; / script&gt;

&lt; / body&gt;
&lt; / html&gt ;
</ code> </ pre>
</ div>

展开原文

原文

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

Alternatively you could go for a full javascript solution like so:

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



无法从客户端运行PHP。 如果希望单击该按钮显示该对话框,则必须在将该元素发送到客户端之前单击它之前发送该元素。 在用户单击按钮之前,您应该隐藏对话框元素。 它可能类似于:</ p>

 &lt;!doctype html&gt; 
&lt; html lang =“en”&gt;
&lt; head&gt;

&lt; meta charset =“utf-8”/&gt;
&lt; link rel =“stylesheet”type =“text / css”href =“Lib \ JqueryUIcss.css”&gt;
&lt; script src =“Lib \ Jquerylib.js “&gt;&lt; / script&gt;
&lt; script src =”Lib \ JqueryUI.js“&gt;&lt; / script&gt;

&lt; / head&gt;
&lt; body&gt;

&lt; button type = “button”class =“LeButton”onclick =“$('#dialog')。dialog()”&gt; Clicky Clicky!&lt; / button&gt;

&lt; div id =“dialog”title =“基本对话框”style =“display:none”&gt;
&lt; p&gt;图片:&lt; / p&gt;
&lt; / div&gt;
&lt; / body&gt;
&lt; / html&gt;
</ code> </ pre>

您还可以将onclick属性更改为头部中的脚本,如下所示:</ p>

 &lt; script&gt; 
$(function(){
$(“。LeButton”)。click(function(){
$('#dialog')。 dialog();
});
});
&lt; / script&gt;
</ code> </ pre>

我建议您更改类</ code > id </ code>的按钮,然后使用 #LeButton </ code>代替 .LeButton </ code> </ p>
</ div>

展开原文

原文

The PHP can't be run from the client. 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:

<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



您可以在客户端处理此问题而无需使用PHP来执行此操作您需要为按钮指定唯一标识符 无论何时单击按钮,您都可以使用简单的偶数器打开对话框,如下所示:</ p>

</ p>





  var dialog = $(”#dialog-form“)。dialog({ 

自动打开:false,
高度:400,
宽度:350, \ n modal:true,

关闭:function(){
//在关闭对话框时执行此操作
}

});

r
document.getElementById('my-button')。addEventListener('click',function(){
dialog.dialog('open');

}); </ code> </ pre>

 #dialog-form { 
background-color:#ccc;

} </ 代码> </ PRE>

&lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 js“&gt;&lt; / script&gt;

&lt; script src =”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js“ &gt;&lt; / script&gt;

&lt; button type =“button”id =“my-button”class =“LeButton”&gt; Clicky Clicky!&lt; / button&gt;

&lt; div id =“dialog-form”&gt;

名称:&lt; input&gt;&lt; br /&gt;

密码:&lt ; input type =“passowrd”&gt;

&lt; / div&gt; </ code> </ pre>

</ div>

</ div>

</ div >

展开原文

原文

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:

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>

</div>

立即提问