Question

我使用Bootstrap创建了一个Modal。但是，我希望模式只出现在IE9及以下，而不是任何其他浏览器。

我想我可以做以下事情：

<!--[if lte IE 9]>
//something here
<![endif]-->

我不知道如何从模态中调用它。

我将如何实现这一目标？

以下是Modal，它位于cfm文件中：

 <body id="#$.getTopID()#" class="#$.createCSSHook($.content('menuTitle'))#" data-spy="scroll" data-target=".subnav" data-offset="50" onload="intialize();" class="modal-open">
    <!--- <cfinclude template="inc/navbar.cfm" /> --->
    <!--- Navbar's display below is set to absolute position --->
    <cfinclude template="inc/navbar_ap.cfm" />
    <div style="overflow-y:hidden;"
        <div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
            <div class="modal-dialog modal-md custom-height-modal">
                <div class="modal-content">
                    <div class="modal-header" style="background-color:#d3d3d3">
                        <button type="button" class="close" data-miss="modal">x</button>
                        <h3 class="modal-header" style="background-color:#d3d3d3">Attention</h3>                        
                    </div><!---Modal-Header Div--->
                    <div class="modal-body">
                        <p style="text-align:center">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p>
                    </div><!---Modal-Body Div--->
                    <div class="modal-footer">
                        <p class="text-center"><a href="" class="btn btn-default" data-dismiss="modal">Close</a></p>
                    </div><!---Modal-Footer Div--->
                </div><!---Modal-Content Div--->
            </div><!---Custom Height Div--->
        </div><!---Modal Fade in Div--->
    </div><!---Start of Modal Div--->                   
    <!--End of Modal container-->

以下是模式显示的脚本。简单的事情：

<script>
   $(function(){
        $('##myModal').modal('show');
    }
</script>

更新

我注意到关闭按钮和顶部的x按钮不会关闭模态。我不确定有什么问题。

更新2

仍然无法解决问题。

$(function(){
	$('##myModal').modal('show');
}

<div class="container" style="overflow-y:hidden;">
        	<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
            	<div class="modal-dialog modal-md custom-height-modal">
                	<div class="modal-content">
                    	<div class="modal-header" style="background-color:##428bca">
                        	<button type="button" class="close" data-dismiss="modal">x</button>
                            <h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>                        
                        </div><!---Modal-Header Div--->
                        <div class="modal-body">
                        	<p style="text-align:center">You are using an outdated browser.<br /> <br /> <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p>
                        </div><!---Modal-Body Div--->
                        <div class="modal-footer">
                        	<p><a href="" class="btn btn-default btn pull-middle" data-dismiss="modal">Close</a></p>
                        </div><!---Modal-Footer Div--->
                    </div><!---Modal-Content Div--->
                </div><!---Custom Height Div--->
            </div><!---Modal Fade in Div--->
        </div><!---Start of Modal Div---> 		
		<!--End of Modal container-->

 <div class="modal-backdrop fade in"></div>

更新3

这就是我所做的：

在头部添加以下内容

<!--[if lte IE 9]>
      <link rel="stylesheet" type="text/css" href="ie-min.css">
    <![endif]-->

这包含一个只出现在IE9及以下版本的类，该部分工作正常。

我继续遇到的问题是模态引导程序无效。关闭按钮不会关闭，而是刷新页面并将其指向返回模式再次弹出的主页。

这就是我所做的。正如你所看到的那样，ie-only css不会在chrome或firefox中显示，但会显示在ie9及以下但是模式不会出现，当它出现时，右上角的关闭和x按钮将无效：

$(function(){
	$('##myModal').modal('show');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="ie-only" style="overflow-y:hidden;">
        	<div class="modal fade" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
            	<div class="modal-dialog modal-md custom-height-modal">
                	<div class="modal-content">
                    	<div class="modal-header" style="background-color:##428bca">
                        	<button type="button" class="close" data-dismiss="modal">x</button>
                            <h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>                        
                        </div><!---Modal-Header Div--->
                        <div class="modal-body">
                        	<p style="text-align:center">You are using an outdated browser.<br /> <br /> <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p>
                        </div><!---Modal-Body Div--->
                        <div class="modal-footer">
                        	<p><a href="" class="btn btn-default btn pull-middle" data-dismiss="modal">Close</a></p>
                        </div><!---Modal-Footer Div--->
                    </div><!---Modal-Content Div--->
                </div><!---Custom Height Div--->
            </div><!---Modal Fade in Div--->
        </div><!---Start of Modal Div---> 		
		<!--End of Modal container-->

如何创建以IE 9及以下版本为目标的Bootstrap模式

0 个答案: