解决select2在bootstrap的modal中默认不显示的问题

  在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题。代码解决如下:

<style>
    /*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/
    .select2-drop {
        z-index: 10050 !important;
    }

    .select2-search-choice-close {
        margin-top: 0 !important;
        right: 2px !important;
        min-height: 10px;
    }

        .select2-search-choice-close:before {
            color: black !important;
        }
    /*防止select2不会自动失去焦点*/
    .select2-container {
        z-index: 16000 !important;
    }

    .select2-drop-mask {
        z-index: 15990 !important;
    }

    .select2-drop-active {
        z-index: 15995 !important;
    }

  因为modal可能是后生成的,所以绑定select2事件时,应该先指定其父元素:

    $(function(){
        $("#PaymentId").select2({
            placeholder: "--请选择--",
            dropdownParent: $("#myModal"),
            allowClear: true
        });
    });

  

时间: 2024-10-30 16:44:36

解决select2在bootstrap的modal中默认不显示的问题的相关文章

解决 select2在bootstrap modal中不能正常使用问题

select2在bootstrap modal中不能正常使用问题 设置CSS .select2-drop { z-index: 10050 !important; } .select2-search-choice-close { margin-top: 0 !important; right: 2px !important; min-height: 10px; } .select2-search-choice-close:before { color: black !important; } /

在BootStrap的modal中使用Select2搜索框无法输入

用modal来show一个对话框 dialog.modal({ backdrop:true, keyboard:true, show:true }); 1 2 3 4 5 然后再modal中初始化select2 dialog.find("select").select2({ formatNoMatches: function() { return "没有选项"; }, placeholder: "请选择...", minimumResultsFo

在BootStrap的modal中使用Select2

  bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.Constructor.prototype._enforceFocus = function() {}; 原文地址:https://www.cnblogs.com/w2011/p/9849703.html

bootstrap --- 在 modal中的 datetimepicker 关闭 ,会造成 modal也会被关闭.

这个大概是事件冒泡造成的. 解决办法: 1 <form id="userForm" class="form-horizontal"> 2 <input type="hidden" name="id" id="id" /> 3 <div class="modal-header"> 4 <button type="button"

bootstrap 的modal中popover操作时,弹窗中的输入框,按钮不能聚焦

本地894行 Modal.prototype.enforceFocus = function () { $(document) .off('focusin.bs.modal') // guard against infinite focus loop .on('focusin.bs.modal', $.proxy(function (e) { if ($(e.target).parents('.popover').length > 0) return;//mod by xss modal上pop

解决:铃声改变,来短信,短信设置中默认铃声的名称没有同步更新

短信界面没有关闭的情况下,在设置中进行操作,短信设置界面中不会进行刷新.因此在当MessagingPreferenceActivity处于活动(onResume)的时候重新初始化,添加代码如下: protected void onResume() { super.onResume();   loadPrefs(); // Since the enabled notifications pref can be changed outside of this activity, // we have

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法 通过Google搜索,发现sele

解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站B(网站B的域名与网站A的域名不同)的资源,这时这个网站B就被认为是第三方.需要注意的是,这儿区分不同网站的标准是域名是否相同,而不是这两个网站是否由同一个公司运营.比如,taobao.com和tmall.com被认为是两

Bootstrap中默认表单的创建

<form action=""> <div class="form-group"> <label class="control-label" for="uname">用户名:</label> <input class="form-control" id="uname" type="text"> <spa