html - tokenize2 下拉菜单未以模式显示
问题描述
我正在使用 tokenize2 但我的问题是它的下拉菜单显示在我的模态后面。我怎样才能解决这个问题？请在下面查看我的代码。我确实产生了输出，但列表显示在背面。
请查看整个 html 文件。删除旧代码。谢谢，这是我的标记化链接
https://www.jqueryscript.net/form/Dynamic-Autocomplete-Tag-Input-Plugin-For-jQuery-Tokenize2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../bower_components/Ionicons/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="../bower_components/datatables.select/select.dataTables.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="../bower_components/select2/dist/css/select2.min.css">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="../bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- tokenize -->
<link rel="stylesheet" href="../bower_components/tokenize2/tokenize2.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<!--link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"-->
<link rel="stylesheet" href="../fonts/fonts.css">
<!-- StartUp Custom CSS (do not remove) -->
<link href="../plugins/bootoast/bootoast.css" rel="stylesheet" type="text/css">
<link href="../program_assets/css/style.css" rel="stylesheet" type="text/css">
</head>
<!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUT -->
<!-- the fixed layout is not compatible with sidebar-mini -->
<body class="hold-transition skin-blue fixed sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="#" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span id="sp-notif-counter" name= "sp-notif-counter" class="label label-warning"></span>
</a>
<ul class="dropdown-menu">
<li id="li-noti" name="li-noti" class="header">You have 0 notification(s)</li>
<li>
<ul class="menu">
</ul>
</li>
<li class="footer"><a href="javascript:void(0);" id="read_all" name="read_all">Mark all as read</a></li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="./../profile/<?php echo $_SESSION['id'] ?>.png" class="user-image" alt="User Image" onerror="this.onerror=null; this.src='./../profile/Default.png'">
<span class="hidden-xs">
<?php
$to_display = "name";
require dirname(__FILE__,2) . '/program_assets/php/naming/naming.php';
?>
</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="./../profile/<?php echo $_SESSION['id'] ?>.png" class="img-circle" alt="User Image" onerror="this.onerror=null; this.src='./../profile/Default.png'">
<p>
<?php
$to_display = "name";
require dirname(__FILE__,2) . '/program_assets/php/naming/naming.php';
?>
-
<?php
$to_display = "branch";
require dirname(__FILE__,2) . '/program_assets/php/naming/naming.php';
?>
<small>
Member since :
<?php
$to_display = "date_created";
require dirname(__FILE__,2) . '/program_assets/php/naming/naming.php';
?>
</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="profile" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="logout" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- =============================================== -->
<!-- Left side column. contains the sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="./../profile/<?php echo $_SESSION['id'] ?>.png" class="img-circle" alt="User Image" onerror="this.onerror=null; this.src='./../profile/Default.png'">
</div>
<div class="pull-left info">
<p>
<?php
$to_display = "name";
require dirname(__FILE__,2) . '/program_assets/php/naming/naming.php';
?>
</p>
<a href="#"><i id="c_status" name="c_status" class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<div class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<?php
include dirname(__FILE__,2) . '/program_assets/php/sidebar/sidebar.php';
?>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- =============================================== -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
@side_header
<small>@side_desc</small>
</h1>
<ol class="breadcrumb page-order"></ol>
</section>
<!-- Main content -->
<section class="content">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">List of Promo Templates</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-3 com-sm-12">
<button id="btn_new" name="btn_new" type="submit" class="btn btn-default btn-sm"><i class="fa fa-file"></i>
New Promo Template
</button>
</div>
</div>
</div>
<div class="box-footer">
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<!-- Version or anything -->
</div>
<strong class="cust-label">Program created by: <a id="footer-cname" name="footer-cname" href="#">CompanyName</a> </strong>
<span class="cust-label">IT Department.</span>
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- NO INTERNET MODAL -->
<div class="modal fade" id="modal-default" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="box box-danger">
<div class="box-body">
<div class="row">
<div class="col-md-12 col-sm-12">
<label>System Message</label>
<br>
<center>
<img class="img-res" src="../dist/img/404-error.png" alt="No Internet Connection">
</center>
<br>
<p class="cust-label">There is no Internet connection. Kindly use the local program to continue your transaction and sync later.</p>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Template Modal -->
<div class="modal fade" id="modal_temp" name="modal_temp">
<div class="modal-dialog modal-md">
<div class="box box-default">
<div class="box-header with-border">
<label class="cust-label">Promo Production</label>
<button type="submit" class="btn btn-default btn-xs pull-right" data-dismiss="modal"><i class="fa fa-close"></i>
</button>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right cust-textbox cust-label" id="txt_date_from" name="txt_date_from" readonly="" autocomplete="off">
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right cust-textbox cust-label" id="txt_date_to" name="txt_date_to" readonly="" autocomplete="off">
</div>
</div>
<div class="col-sm-4 com-sm-12">
<button id="btn_finalize" name="btn_finalize" type="submit" class="btn btn-success btn-sm" style="width: 100%;"><i class="fa fa-clipboard"></i>
Finalize Promo
</button>
</div>
</div>
</div>
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1" data-toggle="tab" class="cust-label">Products</a></li>
<li><a href="#tab_2" data-toggle="tab" class="cust-label">Branches</a></li>
<li><a href="#tab_3" data-toggle="tab" class="cust-label">Logs <small class="label pull-right bg-red">1</small></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="form-group">
<label for="txt_find_code_desc" class="cust-label">Code / Item Description</label>
<input type="text" class="form-control cust-label cust-textbox ui-autocomplete-input" id="txt_find_code_desc" name="txt_find_code_desc" placeholder="Search Description" autocomplete="off">
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label for="cmb_search_type" class="cust-label">Search Type</label>
<select id="cmb_search_type" name="cmb_search_type" class="form-control select2 cust-label cust-textbox" style="width: 100%;">
<option value="code">Code</option>
<option value="description" selected="selected">Description</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="table-container">
<table id="tbl_items" name="tbl_items" class="table table-bordered table-hover cust-label" style="width: 100% !important;">
<thead>
<tr>
<th>Code</th>
<th>Description</td>
<th>Current Price</td>
<th>New Price</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_2">
<div class="row">
<div class="col-md-12 col-sm-12">
<select class="tokenize-demo" multiple style="z-index: 1100 !important;">
<?php
include dirname(__FILE__,2) . '/program_assets/php/dropdown/branch_all.php';
?>
</select>
</div>
</div>
</div>
<div class="tab-pane" id="tab_3">
<div class="row">
<div class="col-md-12 col-sm-12">
<textarea id="txt_promo_remarks" name="txt_promo_remarks" class="form-control cust-label cust-textbox" rows="12" style="resize: none;" readonly></textarea>
</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="progress progress-sm active">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
<!--<label class="cust-label">Creating Promo...</label>-->
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- jQuery 3 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Select2 -->
<script src="../bower_components/select2/dist/js/select2.full.min.js"></script>
<!-- date-range-picker -->
<script src="../bower_components/moment/min/moment.min.js"></script>
<script src="../bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- DataTables -->
<script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="../bower_components/datatables.select/dataTables.select.min.js"></script>
<!-- SlimScroll -->
<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<script src="../plugins/bootoast/bootoast.js"></script>
<!-- bootstrap datepicker -->
<script src="../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- tokenize -->
<script src="../bower_components/tokenize2/tokenize2.js"></script>
<!-- StartUp Custom JS (do not remove) -->
<script src="../program_assets/js/site_essentials/sidebar.js?random=<?php echo uniqid(); ?>"></script>
<script src="../program_assets/js/site_essentials/others.js?random=<?php echo uniqid(); ?>"></script>
<script src="../program_assets/js/web_functions/price_management.js?random=<?php echo uniqid(); ?>"></script>
<!-- PLEASE DONT FORGET TO ADD ?random=<?php echo uniqid(); ?> AT THE END OF YOUR JS TO PREVENT JS CACHING -->
</body>
</html>
解决方案
推荐阅读
- java - 为 sendKeys 语句获取 ElementNotInteractableException
- google-sheets - 分组时在谷歌查询中另一列最大时获取列值
- c# - C# asp.net core中现有类的JSON自定义序列化和反序列化
- java - 是否可以在这些代码上使用 JPanel 而不是 JComponent？
- javascript - 我如何找到两个 UNIX 时间之间的 HH:MM:SS 差异
- node.js - 如何使用@google-cloud/logging 发送带有文本消息和 JSON 有效负载的单个日志条目？
- linux - 相当于“树”命令但不是递归的？
- python - unittest 发现多个文件的模式
- php - 即使表格已填写，按钮仍处于禁用状态
- c# - EF 代码首先在我的模型中不存在的 DB 表上创建了一个列