激活弹出窗口（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. 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.

我今天有一个简单的请求。我想要做的是激活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 (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.

答

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

答

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

答

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>

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

相关推荐