douqi2571 2018-08-14 11:01 采纳率: 0%
浏览 208
已采纳

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

  • 写回答

4条回答 默认 最新

  • duanlanqian9974 2018-08-14 11:15
    关注

    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.
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?