当前位置： 文江博客话题详情

使用jQuery按按钮按下时如何制作弹出窗口

发布于 2025-02-07 13:05:31 字数 6360 浏览 1 评论 0原文

我已经提出了这个问题，在这里也找到了答案。 如何制作一个按钮来制作一个确认框来完成jQuery和html

我可以看到答案是正确的。但是，每当我使用相同的代码与现有代码时，我都看不到弹出窗口，并且我的测试PHP脚本未运行。有人可以在我的原始代码中显示什么干扰吗？

我的代码...

<?php
    // Initialize the session
    session_start();
    date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
    // Check if the user is logged in, if not then redirect him to login page
    if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
        header("location: login.php");
        exit;
    }
    ?>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <title>Dashboard</title>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
    
    
    
      
    </head>
    
    
    
    
    
    <body style=" background-color: #F0F8FF">
    
    <div class="wrapper">
      <div class="sidebar">
        <h2>Dashboard</h2>
        
    
     
        
    </div>
        <div class="main_content">
    
         <div id="loading" >
             <img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
         </div>
           <?php
                include "adminHeader.php";
            ?>
      
    
    
    <div class="mytabs">
      <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#summarytab" role="tab" data-toggle="tab">Summary</a></li>
            <li><a href="#SSWtab" role="tab" data-toggle="tab">SSW KPI Monitoring</a></li>
            <li><a href="#SBCtab" role="tab" data-toggle="tab">SBC KPI Monitoring</a></li>
            <li><a href="#ctbtab" role="tab" data-toggle="tab">CTB KPI Monitoring</a></li>
    
      <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
                    <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
                    <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
                </ul>
      </li>  
      
     </ul>
    </div>
    
    
    
    <div class="mytabs">
    <div class="tab-content">
      <div class="tab-pane active" id="summarytab">Write something for home tab</div>
      <div class="tab-pane" id="SSWtab">
       
      
      
        <div class="card">
                <div class="card-body">
         
                    <form method="POST">
            
                        <div class="mb-3">
                             <button  type='button'  id ="btnnew">submit</button>
                              <p></p>
        
                        </div>
    
            
    
                    </form>
                </div>
    
        
    </div>
      </div>
      <div class="tab-pane" id="SBCtab">C# is also a programming language</div>
      <div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
    
      <div class="tab-pane" id="jquerytab">jQuery content here </div>
      <div class="tab-pane" id="bootstab">Bootstrap Content here
      <ul>
      <li>Bootstrap forms</li>
      <li>Bootstrap buttons</li>
      <li>Bootstrap navbar</li>
      <li>Bootstrap footer</li>
      </ul>
      </div>
      <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>  
      
    </div>
    </div>
    
    
     
    
    
      </div>
    
    
    
    
    
    
    
        </div>
    </div>
    
    </body>
    </html>
    
    
    <script>
    
    
    
      $(window).load(function() {
        $('#loading').hide();
      });
    
    
      $("#btnnew").confirm({
      
      title: "Delete confirmation",
      text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
      confirm: function(button) {        
        console.log('AJAX request in progress...');
        
        $('#loading').show();
        $.ajax({
          type: 'POST',
          url: 'testme.php',
          success: function(data) {
            $("p").text(data);
          },
          complete: function() {      
            $('#loading').hide();
          }
        });
        
      },
      cancel: function(button) {
        console.log("You aborted the operation.");
      },
      confirmButton: "Yes I am",
      cancelButton: "No"
    });
    
    
    
    
    
      
    
        
    </script>
原文

I have already raised this question with and I have found the answers as well here.
How to make an button to make a confirmation box to do a task in Jquery and HTML

I could see the answers are correct as in the output. But whenever I used this same code to my existing code I could not see the popup window and my test php script is not running. Can someone show what interfered here in my original code?

My Code...

<?php
    // Initialize the session
    session_start();
    date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
    // Check if the user is logged in, if not then redirect him to login page
    if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
        header("location: login.php");
        exit;
    }
    ?>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <title>Dashboard</title>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
    
    
    
      
    </head>
    
    
    
    
    
    <body style=" background-color: #F0F8FF">
    
    <div class="wrapper">
      <div class="sidebar">
        <h2>Dashboard</h2>
        
    
     
        
    </div>
        <div class="main_content">
    
         <div id="loading" >
             <img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
         </div>
           <?php
                include "adminHeader.php";
            ?>
      
    
    
    <div class="mytabs">
      <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#summarytab" role="tab" data-toggle="tab">Summary</a></li>
            <li><a href="#SSWtab" role="tab" data-toggle="tab">SSW KPI Monitoring</a></li>
            <li><a href="#SBCtab" role="tab" data-toggle="tab">SBC KPI Monitoring</a></li>
            <li><a href="#ctbtab" role="tab" data-toggle="tab">CTB KPI Monitoring</a></li>
    
      <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
                    <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
                    <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
                </ul>
      </li>  
      
     </ul>
    </div>
    
    
    
    <div class="mytabs">
    <div class="tab-content">
      <div class="tab-pane active" id="summarytab">Write something for home tab</div>
      <div class="tab-pane" id="SSWtab">
       
      
      
        <div class="card">
                <div class="card-body">
         
                    <form method="POST">
            
                        <div class="mb-3">
                             <button  type='button'  id ="btnnew">submit</button>
                              <p></p>
        
                        </div>
    
            
    
                    </form>
                </div>
    
        
    </div>
      </div>
      <div class="tab-pane" id="SBCtab">C# is also a programming language</div>
      <div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
    
      <div class="tab-pane" id="jquerytab">jQuery content here </div>
      <div class="tab-pane" id="bootstab">Bootstrap Content here
      <ul>
      <li>Bootstrap forms</li>
      <li>Bootstrap buttons</li>
      <li>Bootstrap navbar</li>
      <li>Bootstrap footer</li>
      </ul>
      </div>
      <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>  
      
    </div>
    </div>
    
    
     
    
    
      </div>
    
    
    
    
    
    
    
        </div>
    </div>
    
    </body>
    </html>
    
    
    <script>
    
    
    
      $(window).load(function() {
        $('#loading').hide();
      });
    
    
      $("#btnnew").confirm({
      
      title: "Delete confirmation",
      text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
      confirm: function(button) {        
        console.log('AJAX request in progress...');
        
        $('#loading').show();
        $.ajax({
          type: 'POST',
          url: 'testme.php',
          success: function(data) {
            $("p").text(data);
          },
          complete: function() {      
            $('#loading').hide();
          }
        });
        
      },
      cancel: function(button) {
        console.log("You aborted the operation.");
      },
      confirmButton: "Yes I am",
      cancelButton: "No"
    });
    
    
    
    
    
      
    
        
    </script>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

不语却知心 2025-02-14 13:05:31

替换$（document）.load（function（）{}）;

用

$（function（）{}）;或 $（document）.on .on（ 'load'，function（）{}）

是因为.load（） it deverced ，请参阅

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Dashboard</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>




</head>





<body style=" background-color: #F0F8FF">

    <div class="wrapper">
        <div class="sidebar">
            <h2>Dashboard</h2>




        </div>
        <div class="main_content">

            <div id="loading">
                <img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
            </div>
            <?php
            include "adminHeader.php";
            ?>



            <div class="mytabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#summarytab" role="tab" data-toggle="tab">Summary</a></li>
                    <li><a href="#SSWtab" role="tab" data-toggle="tab">SSW KPI Monitoring</a></li>
                    <li><a href="#SBCtab" role="tab" data-toggle="tab">SBC KPI Monitoring</a></li>
                    <li><a href="#ctbtab" role="tab" data-toggle="tab">CTB KPI Monitoring</a></li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
                            <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
                            <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
                        </ul>
                    </li>

                </ul>
            </div>



            <div class="mytabs">
                <div class="tab-content">
                    <div class="tab-pane active" id="summarytab">Write something for home tab</div>
                    <div class="tab-pane" id="SSWtab">



                        <div class="card">
                            <div class="card-body">

                                <form method="POST">

                                    <div class="mb-3">
                                        <button type='button' id="btnnew">submit</button>
                                        <p></p>

                                    </div>



                                </form>
                            </div>


                        </div>
                    </div>
                    <div class="tab-pane" id="SBCtab">C# is also a programming language</div>
                    <div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>

                    <div class="tab-pane" id="jquerytab">jQuery content here </div>
                    <div class="tab-pane" id="bootstab">Bootstrap Content here
                        <ul>
                            <li>Bootstrap forms</li>
                            <li>Bootstrap buttons</li>
                            <li>Bootstrap navbar</li>
                            <li>Bootstrap footer</li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>

                </div>
            </div>





        </div>







    </div>
    </div>

</body>

</html>


<script>
    $(function() {
        $('#loading').hide();
    })


    $("#btnnew").confirm({

        title: "Delete confirmation",
        text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
        confirm: function(button) {
            console.log('AJAX request in progress...');

            $('#loading').show();
            $.ajax({
                type: 'POST',
                url: 'testme.php',
                success: function(data) {
                    $("p").text(data);
                },
                complete: function() {
                    $('#loading').hide();
                }
            });

        },
        cancel: function(button) {
            console.log("You aborted the operation.");
        },
        confirmButton: "Yes I am",
        cancelButton: "No"
    });
</script>

replace $(document).load(function() {});

with

$(function() {}); or $(document).on('load', function() {})

Because .load() is Deprecated, See the Bug #11733

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Dashboard</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>




</head>





<body style=" background-color: #F0F8FF">

    <div class="wrapper">
        <div class="sidebar">
            <h2>Dashboard</h2>




        </div>
        <div class="main_content">

            <div id="loading">
                <img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
            </div>
            <?php
            include "adminHeader.php";
            ?>



            <div class="mytabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#summarytab" role="tab" data-toggle="tab">Summary</a></li>
                    <li><a href="#SSWtab" role="tab" data-toggle="tab">SSW KPI Monitoring</a></li>
                    <li><a href="#SBCtab" role="tab" data-toggle="tab">SBC KPI Monitoring</a></li>
                    <li><a href="#ctbtab" role="tab" data-toggle="tab">CTB KPI Monitoring</a></li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
                            <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li>
                            <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li>
                        </ul>
                    </li>

                </ul>
            </div>



            <div class="mytabs">
                <div class="tab-content">
                    <div class="tab-pane active" id="summarytab">Write something for home tab</div>
                    <div class="tab-pane" id="SSWtab">



                        <div class="card">
                            <div class="card-body">

                                <form method="POST">

                                    <div class="mb-3">
                                        <button type='button' id="btnnew">submit</button>
                                        <p></p>

                                    </div>



                                </form>
                            </div>


                        </div>
                    </div>
                    <div class="tab-pane" id="SBCtab">C# is also a programming language</div>
                    <div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>

                    <div class="tab-pane" id="jquerytab">jQuery content here </div>
                    <div class="tab-pane" id="bootstab">Bootstrap Content here
                        <ul>
                            <li>Bootstrap forms</li>
                            <li>Bootstrap buttons</li>
                            <li>Bootstrap navbar</li>
                            <li>Bootstrap footer</li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="htmltab">Hypertext Markup Language</div>

                </div>
            </div>





        </div>







    </div>
    </div>

</body>

</html>


<script>
    $(function() {
        $('#loading').hide();
    })


    $("#btnnew").confirm({

        title: "Delete confirmation",
        text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
        confirm: function(button) {
            console.log('AJAX request in progress...');

            $('#loading').show();
            $.ajax({
                type: 'POST',
                url: 'testme.php',
                success: function(data) {
                    $("p").text(data);
                },
                complete: function() {
                    $('#loading').hide();
                }
            });

        },
        cancel: function(button) {
            console.log("You aborted the operation.");
        },
        confirmButton: "Yes I am",
        cancelButton: "No"
    });
</script>

回复 原文
~没有更多了~

关于作者

一人独醉

暂无简介

文章
评论
567 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文