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 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况
  • ¥15 画两个图 python或R
  • ¥15 在线请求openmv与pixhawk 实现实时目标跟踪的具体通讯方法
  • ¥15 八路抢答器设计出现故障
  • ¥15 opencv 无法读取视频
  • ¥15 用matlab 实现通信仿真
  • ¥15 按键修改电子时钟,C51单片机
  • ¥60 Java中实现如何实现张量类,并用于图像处理(不运用其他科学计算库和图像处理库))
  • ¥20 5037端口被adb自己占了
  • ¥15 python:excel数据写入多个对应word文档