Javascript 为什么不显示？

我想显示一个模态，但它不显示，当我删除引导或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>

#{searchMb.updateSearchUserText（）}


#{followMb.getIfExists（用户）}

Posts de#{user.username}
#{post.user.username}
#{post.content}

#{post.date}hs

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>

$（文档）.ready（函数（）{
$（'.modal'）.modal（'show'）；
$（“.button collapse”）.sideNav（）；
$（'select'）。材料选择（）；
});
函数OpenModel（id）{
$（'#modal'+id）.modal（'open'）；
}
函数OpenModelSearch（id）{
$（'#modalsearch'+id）.modal（'open'）；
}
$（函数（）{
$（'.form seach form'）。on（'keypress'，函数（事件）{
if（event.which==13&&$（event.target）.is（':input'））{
event.preventDefault（）；
$（'#save'）。触发器（'click'）；
}
});
});

当我删除bootstrap.css时，信息会显示出来。模态永远不会使用info yes，但仅当我在

---

另外，我也不知道它是否名副其实，我把它放在我的文件夹\src\main\webapp\js

你需要在自己的Javascript之前加载你的js库（jquery和bootstrap）。因为你在库之前加载你的

/js/scripts.js

，你在利用技术上还不“存在”的东西。

因为你说当你删除bootstrap.css时它会显示出来，所以我认为你没有js问题，但可能一些css被覆盖了。您需要使用开发人员工具，在使用bootstrap.css和不使用bootstrap.css两种情况下显示模式后检查html，并进行比较以查看发生了什么$（'.modal'）。modal（'show'）？？信息显示，模式从不显示。另外，当我在中删除class=modal时，信息显示已经更改了，并且该模式仍然不工作。也许Js是错的？