使用justBootstrap模态

Question

使用justBootstrap模态

mdu*_*das 53 css twitter-bootstrap bootstrap-modal

我正在将我的Modal从Bootstrap集成到另一个不使用它的站点.我看到bootstrap允许你为每个组件分离Javascript.但那CSS呢？如果我链接到bootstrap.css,整个网站将会改变.我只是想要足够的CSS来使Modal工作.(我尝试通过CSS文件,只是猜测我需要什么,但它没有用).

Answer 1

Ton*_*y M 98

从Bootstrap v3.2.5开始更新

感谢@Gruber自v3.2.5起的确认.

链接仍然在这里,以自定义@Fisu提到的设置.

您需要选择4个选项,而不仅仅是modal如上所述.首先单击Toggle All关闭所有内容,然后选择这4个选项;

Buttons在Common CSS下
Close icon在组件下
Component animations (for JS)在JavaScript组件下
Modals在JavaScript组件下

这应该将所有的CSS都带到你需要的地方.接下来是jQuery插件部分,再次选择Toggle All来关闭所有内容,然后选择两个插件:

Modals在链接到组件
Transitions在魔法下(任何动画都需要)

这就是你所需要的,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",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}

Run Code Online (Sandbox Code Playgroud)

这只是确保字体与原始模态样式相似,并且不会占用您的页面样式(可能会稍微调整一下).最后要注意的一点是,您可以通过http://cssminifier.com/运行它来缩小css .节省几KB.

实施模态:

我不妨完成这个.我正在使用cookie插件,因为我想让我的用户选择隐藏消息14天,这是在代码中设置的.以下是您需要的代码块:

这应该在<head>你的文档中,可能在你的任何css之后,所以即使在结束</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 -->

Run Code Online (Sandbox Code Playgroud)

这应该在你的内心<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 -->

Run Code Online (Sandbox Code Playgroud)

此代码应该在结束</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 -->

Run Code Online (Sandbox Code Playgroud)

最后,您需要在上面的插件之后添加此脚本.这有点根据我的情况定制,我只是在没有设置cookie的情况下启动模态,并且如果模态启动创建了一个函数来单击Do not Show Again,它创建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>

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!祝好运.

多德.很棒的答案. (4认同)
从Bootstrap 3.3.5版本可以看出这仍然有效且完美正常.还记得在jQuery插件组合中添加[transitions.js](http://getbootstrap.com/javascript/#transitions)(在**Magic**下),以使动画效果生效. (2认同)
@TonyM先生，你真是传奇！ (2认同)

Answer 2

Fis*_*isu 14

转到Bootstrap自定义部分,然后仅选择组件部分中的模态选项.下载文件,打开bootstrap.css文件并将整个内容复制到您自己的CSS文件中.

如果你试图弄清楚你需要哪些特定部件,你可能会错过一些重要的东西,而且,模态css本身并不算太大.

更新:链接现在在这里.我发现它仍然为css的开头添加了很多规范化,但可以安全地删除它(从html到img,保持css从.img-responsive开始).

Answer 3

Shl*_*sid 8

在这里你使用bootstrap 3:

JSnippet DEMO和源代码

github gist中的源代码

包含CSS后,JS的用法完全相同:

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></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">Save changes</button>
            </div>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，8 月前
查看次数：	71890 次
最近记录：	8 年，2 月前

使用*just*Bootstrap模态

使用justBootstrap模态