bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

网友投稿 524 2023-03-25


bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

模态框嵌套

在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框;即模态框嵌套。

模态框嵌套http://需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉。

HTML代码如下:

  

  

  

  

  

  

tabindex

模态框中tabindex属性w3c的解释是:tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。几乎所有浏览器均 tabindex 属性,除了 Safari。

在模态框嵌套中,当该属性存在时不论值等于多少,键盘上的返回键(Esc)都能起作用;而不存在时返回键(Esc)不起作用。

去除模态框自带的阴影

当触发模态框时会产生一个阴影层覆盖整个页面。

该 阴影层是由一个类名叫 .modal-backdrop 控制显示。

.modal-backdrop 在bootsrap源码的样式如下:

.modal-backdrop.fade {

filter: alpha(opacity=0);

opacity: 0;

}

.modal-backdrop.in {

filter: alpha(opacity=50);

opacity: .5;}

当需要去除阴影层时可以为其设置css样式

.modal-backdrop {

filter: alpha(opacity=0)!important;

opacity: 0!important;

}

或者通过js控制

$(".modhttp://al-backdrop").remove();

总结

以上所述是给大家介绍的bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api接口地址测试用例(api接口测试方法)
下一篇:app后端接口开发(app后端开发语言)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~