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条)

报告相同问题?

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置