css – 使用*只是* Bootstrap模式

我将我的Modal从Bootstrap与另一个不使用它的网站。
我看到bootstrap让你分离每个组件的Javascript。但是CSS呢？如果我链接到bootstrap.css整个网站将改变。我只是想要足够的CSS为Modal工作。 (我试图通过CSS文件，只是猜到我需要的，但它没有工作)。

解决方法

更新为Bootstrap v3.2.5

感谢@Gruber确认从v3.2.5。

链接仍然是here，按照@Fisu所述自定义设置。

你需要选择4个选项，而不只是模态的说。首先单击“切换所有”以关闭所有内容，然后选择这4个选项;

> Common CSS下的按钮
>关闭图标
>组件动画(针对JS)在JavaScript组件下
> JavaScript组件下的模式

这应该带来所有的CSS，你需要的。接下来是jQuery插件部分，再次通过选择Toggle All来关闭所有的选项，然后选择两个插件：

>链接到组件下的模式
>魔法下的过渡(任何种类的动画都需要)

这就是你需要的，js(bootstrap.min.js)和css(只有bootstrap.css，你需要修改一下，下面解释)。转到该页面的底部，选择编译和下载以抓取您的包。

最后一件事要注意。正如@rrrrrrrrrk提到的，“我发现它仍然添加了很多规范化的css的开始，但可以安全地删除它(从html到img，保持css从.img响应)。这仍然有效。我还添加了以下css强制几种样式到模态：

.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Arial,sans-serif !important; color:#000 !important; font-size:14px;}

这只是确保字体类似于原来的模式样式，不采取你的页面样式(可能会被调整一点)。要注意的最后一个项目，你可以通过运行它通过http://cssminifier.com/在这一点上缩小CSS。保存几KB。

实现模式：

我可能只是完成这一点。我使用cookie插件，因为我想给用户一个选项来隐藏消息14天，这是在代码中设置。这里是你需要的代码块：

这应该在< head> of you document，might after any of your css，so even just before the ending< / head>标签将工作。

<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

这应该在你的< body>。这将创建模态和您包括的CSS将隐藏它。

<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="important-msg-label">Message Title!</h4>
          </div>
          <div class="modal-body">
            <p>Message text</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
          </div>
        </div>
      </div>
    </div>

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

这段代码应该在结尾< / body>标签。它加载jQuery，bootstrap和我需要的cookie插件。

<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest jQuery (1.11.1) -->
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>    

    <!-- jQuery Cookie -->
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

最后，您需要在上述插件之后添加此脚本。这是一个有点定制我的情况，我只是启动模态如果没有设置cookie，如果模态启动创建一个功能，点击不要再显示创建cookie禁用启动模态。

<script>
    //Start the DOM ready
    $( document ).ready(function() {


        //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

            //Check to see if the cookie exists for the Don't show again option
            if (!$.cookie('focusmsg')) {
                //Launch the modal when you first visit the site            
                $('#important-msg').modal('show');
            }

            //Don't show again mouse click
            $("#dont-show-again").click( function() {

                //Create a cookie that lasts 14 days
                $.cookie('focusmsg','1',{ expires: 14 });     
                $('#important-msg').modal('hide');      

            }); //end the click function for don't show again

        //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP


    }); //End the DOM ready
</script>

希望这可以帮助！祝你好运。

css – 使用只是 Bootstrap模式

解决方法

猜你在找的CSS相关文章