Question

我想使用Bootbox对话框窗口删除用户，但是当我单击Remove按钮时，Bootbox对话框窗口不显示。我写了一个简单的程序。这是我的代码：在我确认图书馆之前：

<head>
    <title>Adminstration</title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootbox.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

我的html代码如下：

<form id="form1" action="footer.php">
    <div class="body-wrap" id="wrapper" style="overflow: auto;">    
            <div class="container" id="container" style=" margin-top: 40px;">
                <div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2" id="well">
                    <?php $arr = array(1, 2, 3, 4); foreach ($arr as $value)
                        {  $value = $value * 2;
                             ?>             
                    <div class="row user-row" style="border-bottom: 1px solid #ddd;">
                        <div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
                            <strong><?php echo $value ?></strong><br>
                            <span class="text-muted">Value: <?php echo $value; ?> </span>
                        </div>
                        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user pull-right" data-for=".<?php echo $value; ?>">
                            <i class="glyphicon glyphicon-chevron-down text-muted "></i>
                        </div>
                    </div>      
                    <div class="row user-infos <?php echo $value; ?>" id="user-infos">  
                        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1" id="col-xs">
                            <div class="panel panel-primary" id="panel">
                                <div class="panel-heading">
                                    <h2 class="panel-title" style="text-align: center;">user info</h2>
                                </div>
                                <div class="panel-body">
                                    <div class="row-fluid">
                                        <div class="span6">
                                            <h3> <?php echo  $value ?> </h3><br>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-footer clearfix" id="footer">
                                    <span>
                                        <a class="delete_user btn btn-danger btn-sm pull-right" id="del" href="" data-toggle="tooltip" title="Delete user"><span class="glyphicon glyphicon-remove"></span></a>
                                    </span > 
                                </div>
                            </div>
                        </div>
                    </div><?php } ?>
                </div> 
            </div>
    </div>
</form>

和js代码：

    $(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); 
});
/************************USERS********************************/
    $(document).ready(function() {
        var panels = $('.user-infos');
        var panelsButton = $('.dropdown-user');
        panels.hide();

        //Click dropdown
        panelsButton.click(function() {
            //get data-for attribute
            var dataFor = $(this).attr('data-for');
            var idFor = $(dataFor);

            //current button
            var currentButton = $(this);
            idFor.slideToggle(400, function() {
                //Completed slidetoggle
                if(idFor.is(':visible'))
                {
                  currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                }
                else
                {
                    currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                }
            })
        });
    });
/********************************************************/

/************************DELETE USERS*************************************/
    $(document).ready(function(){
        $('.delete_user#del').click(function(e){ 
            e.preventDefault();
            bootbox.dialog({
                message: "<i class='fa fa-warning fa-2x' style='color: orange;'></i><span style='font-size:16px; position: absolute; margin-left: 5px; margin-top: 5px;'>Are you sure to delete this user?</span>",
                title: "<i class='glyphicon glyphicon-trash'></i> Delete user!",
                buttons: {
                    danger: {
                        label: "Delete!",
                        className: "btn-danger",
                        callback: function() {/*some code*/}
                    },
                    success: {
                        label: "No",
                        className: "btn-success",
                        callback: function() {
                            $('.bootbox').modal('hide');
                        }
                    }
                }
            });
        });
    });
/*******************************************************************/

此Bootbox对话框的js代码可以使用另一个php文件，但是不适用于该php文件。

引导对话框对话框不显示

0 个答案: