Question

我想显示一个模态，但它没有显示，当我删除bootstrap或class = modal时，它会显示没有模态的信息

usuarios.xhtml

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
                 </script>
    <script type="text/javascript" src="/js/scripts.js"></script>

        <div>
            <div class="container form-search">
                <div class="row">
                    <div class="input-field col s4">
                        <h:form id="formSearch">
                            <h:inputText value="#{searchMb.searchText}" id="save"
                                style="width: 80%;" />
                            <h:commandLink action="#{searchMb.searchUser()}"
                                styleClass="btn btn-info" value="Buscar Usuario">
                                <f:ajax render="listUsers" execute="formSearch"></f:ajax>
                            </h:commandLink>
                        </h:form>
                    </div>
                </div>
                <div>
                    <h:panelGroup layout="block" id="listUsers">
                        <h5 style="margin-bottom: 30px;">#{searchMb.updateSearchUserText()}</h5>
                        <ul class="collection">
                            <ui:repeat var="user" value="#{searchMb.getUsersSearch()}">
                                <li style="position: relative"><a
                                    href="#modalsearch#{user.id_user}"
                                    onclick="openModalSearch(#{user.id_user})" class="black-text">
                                        <img width="100" height="100" src="#{authMb.getSrcImage(user)}"
                                        alt="" /> <strong class="title">#{user.username}</strong>
                                        <p>
                                            Seguidores: #{followMb.getFollowersByUser(user)} <br />
                                        </p>
                                </a>
                                    <div style="position: absolute; right: 5%; top: 30%;">
                                        <h:form style="display:inline;margin-left:10px;">
                                            <h:commandLink action="#{followMb.crearFollower(user)}"
                                                styleClass="#{followMb.getMessageFollow(user)}">
                                                <i>#{followMb.getIfExists(user)}</i>
                                                <f:ajax render="listUsers" execute="@form"></f:ajax>
                                            </h:commandLink>
                                        </h:form>

                                    </div></li>
                                <div id="modalsearch#{user.id_user}" class="modal">
                                    <div class="modal-content">
                                        <h3>Posts de #{user.username}</h3>
                                        <div class="row">
                                            <ui:repeat var="post"
                                                value="#{createPostMb.getPostsByUser(user)}">
                                                <div >
                                                    <div>
                                                        <div>
                                                         <span>#{post.user.username}</span>
                                                        </div>
                                                        <div>
                                                            <p>#{post.content}</p>
                                                        </div>
                                                        <div>
                                                            <p>#{post.date}hs</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </ui:repeat>
                                        </div>
                                    </div>
                                </div>



                            </ui:repeat>
                        </ul>
                        <br />

                    </h:panelGroup>

scripts.js中

<script>
$(document).ready(function(){
  $('.modal').modal('show');
  $(".button-collapse").sideNav();
  $('select').material_select();

});

function openModal(id) {
  $('#modal'+id).modal('open');
}

function openModalSearch(id) {
  $('#modalsearch'+id).modal('open');
}


$(function(){
  $('.form-seach form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

</script>

当我删除bootstrap.css时，信息显示。模态从不起作用信息是，但只有当我删除

中的class = modal时

另外我不知道它是否被很好地调用，我把它放在我的文件夹\ src \ main \ webapp \ js

Answer 1

您需要在自己的Javascript之前加载JS库（jquery和bootstrap）。既然您在图书馆之前加载了/js/scripts.js，那么您正在利用技术上尚未存在的东西。

为什么模态不显示？

1 个答案: