从另一个页面打开引导模式 [英] Open a bootstrap modal from another page

查看：36
本文介绍了从另一个页面打开引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个链接列表，每个链接都打开自己的模式.这些模态内容中的每一个都显示一个 html 文件.这是一个示例；

<div id="how-rtm-works" class="modal hidefade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h1 id="myModalLabel">管理权如何运作</h1>

<div class="modal-body" id="utility_body"><p>一个很好的身体……这被来自传入的 href</p> 的内容所取代.

<div class="modal-footer"><button class="btn" data-dismiss="modal">关闭</button>

<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">如何正确管理作品</a></li>

因为有多个模态，每个模态都有自己的 ID，在数据目标中引用.

任何人都可以建议我如何从另一个页面定位这些模式，或者在我的情况下所有页面都将链接到网站页脚导航中.

解决方案

您将使用的第一页:

开放式模态</a>

在第二页，您将插入模态和以下脚本:

I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;

<div id="how-rtm-works" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
<div class="modal-content">
 <div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>

Because there is more than one modal, each has its own ID which is referenced in the data-target.

Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.

解决方案

First page you'll use:

<a href="second.html#myModalLabel" class="btn btn-primary"> Open Modal </a>

At the second page you'll insert your modal and the follow script:

        <script type='text/javascript'>
            (function() {
                'use strict';
                function remoteModal(idModal){
                    var vm = this;
                    vm.modal = $(idModal);

                    if( vm.modal.length == 0 ) {
                        return false;
                    }

                    if( window.location.hash == idModal ){
                        openModal();
                    }

                    var services = {
                        open: openModal,
                        close: closeModal
                    };

                    return services;
                    ///////////////

                    // method to open modal
                    function openModal(){
                        vm.modal.modal('show');
                    }

                    // method to close modal
                    function closeModal(){
                        vm.modal.modal('hide');
                    }
                }
                Window.prototype.remoteModal = remoteModal;
            })();

            $(function(){
                window.remoteModal('#myModalLabel');
            });
        </script>

这篇关于从另一个页面打开引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆