Question

我有一个包含其他模态的bootstrap模式，问题是当第一次访问页面时，即使您没有点击任何按钮来触发它，也会显示此主模式。 modal在这个阶段几乎起作用，触发其他模态的按钮工作，但是这个主模态的关闭按钮不起作用。点击show＆＃39; main modal＆＃39;按钮，页面的其余部分变暗（这意味着现在模态被触发（活动），一切都像它应该的那样工作，甚至关闭按钮。

我尝试使用自动隐藏此主模式的javascript，但它没有工作，没有发生任何不同，但同样的脚本自动显示这个主模式，正确触发主模式，但我不想当有人访问该页面时，每次触发该模态。

以下是mako模板中主模式的代码：

<%inherit file="../base.mak"/>


<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#linkEditor">
  Launch demo modal
</button>




<!-- Modal -->
<div class="modal" id="linkEditor" 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" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Link editor</h4>
      </div>
      <div class="modal-body">


        <form class="form-horizontal.form-actions " action="${request.route_url('link')}" method="post">
            <div class="row">
                <div class="span3">
                    <h4>Search links</h4>
                    <input name="keyword" type="text" class="input-block-level" placeholder="Search links">

                    <button type="submit" class="btn btn-primary">Search</button>

                </div>
            </div>   
        </form>

        <button type="button" class="btn btn-success btn-small" data-toggle="modal" data-target="#editLink">
        Edit a link
        </button>

        <button type="button" class="btn btn-success btn-small" data-toggle="modal" data-target="#createLink">
        Create a link
        </button>

        <button type="button" class="btn btn-danger btn-small" data-toggle="modal" data-target="#deleteLink">
        Delete a link
        </button>

        <div class="container">
            <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>URL</th>
                <th>Shortcode</th>
            </tr>
            </thead>
            <tbody>

            % for link in links:
            <tr onclick="selectLink(${link.id})">
                <td>${link.name}</td>
                <td>${link.url}</td>
                <td>${link.shortcode}</td>       
            </tr>
            % endfor

            </tbody>
            </table>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Select link</button>
      </div>
    </div>
  </div>
</div>

这是我的python服务器端代码：

#path from the __init__.py
config.add_route('link','/link')

@view_config(route_name='link', renderer='protos:templates/link/link.mak')
def link(request):
    session = DBSession()
    keyword = None

    if (u'keyword' in request.POST.keys()):
        keyword = request.POST.get(u'keyword')

    if not keyword == None:
        #add order by something later?
        #better logic for the searching?
        links = session.query(mail_link).filter(or_(
                        mail_link.name.like ('%' + keyword + '%'),
                        mail_link.url.like ('%' + keyword + '%'),
                        mail_link.shortcode.like ('%' + keyword + '%')
                        )).all()

    else:
        links = session.query(mail_link).all()

    return {'links': links}

感谢您的时间和帮助。

Bootstrap模态是可见的，即使它不应该是

0 个答案: