Question

我有一个包含<a>的mustache.js模板，其目标是myModal，如下所示：

<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3">
        <a style="display:block" data-toggle="modal" data-target="#myModal">
            <div class="profile-preview">
                <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
                <h1>{{first_name}} {{last_name}}</h1>
                <h2 class="text-muted">{{major}}</h2>
                <h3 class="text-muted">Cohort {{cohort}}</h3>
            </div>
        </a>
    </div>
</script>

这是模式：

<div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
                    <h3 class="modal-title">BluLocker</h3>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
                                <img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
                            </div>
                        </div>
                    </div>

                    <p>...</p>

                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

单击结果时，屏幕会变暗但不显示模态。我被引导相信模式与javascript中的某些内容相冲突，因为我无法在网站目录的任何位置使用模式。

这是我的javascript链接：

    <!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Mousctache.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>

<!-- Custom JavaScript -->
<script src="js/custom.js"></script>

我还有一些运行JS的内联脚本标签我需要在单击moustache.js模板中的<a>时显示模式。

仅供参考，这是从<body>标记开始的完整HTML页面：

<body>

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close glyphicon glyphicon-remove" data-dismiss="modal"></button>
                <h3 class="modal-title">BluLocker</h3>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-offset-2 col-sm-offset-2 col-xs-offset-1">
                            <img src="img/portfolio/blulocker1.jpg" alt="BluLocker" class="img-responsive">
                        </div>
                    </div>
                </div>

                <p>...</p>

            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>  

<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html">HOME</a>
                </li>
                <li>
                    <a href="about.html">ABOUT</a>
                </li>
                <li>
                    <a href="apply.html">APPLY</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">RESOURCES <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="calander.html">Calander</a>
                        </li>
                        <li>
                            <a href="people.html">People</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<header class="intro-header" style="background-image: url('img/slidedeck/ex1.jpg')">
    <div style="background: rgba(0,0,0, 0.5);">
        <div class="container">
            <div class="row">
                <div class="site-heading">
                    <h1>NETWORK</h1>
                    <hr class="small">
                    <h2 class="subheading">The most valuable part of EPG is the people.</h2>
                </div>
            </div>
        </div>
    </div>
</header> 
<div class="search-navbar">
    <input type="search" name="search" id="search" placeholder=""/>
</div>
<div class="container">
    <div id="profile-results" class="row">

    </div>  
</div>
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <ul class="list-inline text-center">
                        <li>
                            <a href="" target="_blank">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="" target="_blank">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-facebook fa-stack-1x"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-youtube fa-stack-1x"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <p class="copyright text-muted">Copyright &copy; Entrepreneurship for the Public Good 2015</p>
                </div>
            </div>
        </div>
    </footer>
</div>

然后我有一堆内联JavaScript和结束</body>：

<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3">
        <a style="display:block" data-toggle="modal" data-target="#myModal">
            <div class="profile-preview">
                <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
                <h1>{{first_name}} {{last_name}}</h1>
                <h2 class="text-muted">{{major}}</h2>
                <h3 class="text-muted">Cohort {{cohort}}</h3>
            </div>
        </a>
    </div>
</script>

<script id="modal-template" type="text/template">
<div id="myModal">
    <div class="contianer">
        <div class="row">
            <div class="col-sm-6">
                <img width="300px" src="{{img_url}}" alt="Profile of {{first_name}} {{last_name}}" class=" img-circle img-responsive">
            </div>
            <div class="col-sm-6">
                <h1>{{first_name}} {{last_name}}</h1>
                <h2>{{major}}</h2>
                <h3>{{cohort}}</h3>
                <h4>{{home_town}}</h4>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-6">
                <h1>About {{first_name}}</h1>
            </div>
            <div class="col-xs-6">
                <h3>Status:{{status}}</h3>
            </div>
        </div>
        <div class = "row">
            <p>{{bio}}</p>
        </div>
    </div>            
    <a href="{{linkedin}}">LinkedIn &rarr;</a>            
</div>

</script>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Mousctache.js -->
<script   src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js"></script>

<!-- Custom JavaScript -->
<script src="js/custom.js"></script>

 <script type="text/javascript">
 $('#search').keyup(function() {
    var searchField = $('#search').val();
    var myExp = new RegExp(searchField, "i");
    $.getJSON('/profiles.json', function(data){
        var result =""
        $.each(data.profiles, function(key, val){

            var fullName = val.first_name + " " + val.last_name
            var cohortNum = val.cohort.toString()
            var cohortName = "cohort " + cohortNum
            if ((val.first_name.search(myExp) != -1) || 
                (val.last_name.search(myExp) != -1) ||
                (val.major.search(myExp) != -1) ||
                (fullName.search(myExp) != -1)||
                (cohortNum.search(myExp) != -1)||
                (cohortName.search(myExp) != -1)
                ){
                    var template = $('#profile-preview-template').html();
                    result += Mustache.render(template, val);       
            }
        });
        $('#profile-results').html(result);
    });
});
</script>

</body>

此外，这里还有custom.js文件：

$(function(){ 
//Variables
var slideqty = $('#featured .item').length; //get the number of slides in the carousel deck
var wheight = $(window).height(); //get the height of the window
var randSlide = Math.floor(Math.random()*slideqty); //pick a random number from 0-slideqty

//makeIndicators
//Automatically make indicators on the carousel for each slide in the deck
for (var i=0; i < slideqty; i++) {
    var insertText = '<li data-target="#featured" data-slide-to="' + i + '"';
    if (i === 0) {
        insertText += ' class="active" ';
    }
    insertText += '></li>';
    $('#featured ol').append(insertText);
}

$('.carousel').carousel({
    pause: false
}); // end of makeIndicator

//fullHeight
// set all elements with class "fullheight" to a height equal to height of viewport on load
$('.fullheight').css('height', wheight);

//resize the "fullheight" elements on screen resize
$(window).resize(function() {
    wheight = $(window).height(); //get the height of the window
    $('.fullheight').css('height', wheight); //set to window tallness
});

//adjust the interval of the carousel
$('.carousel').carousel({
    interval: 10000 //changes the speed in miliseconds
})

//make images darker
$('.item img').each(function() {
    $(this).wrap('<div class="tint"></div>'); //wraps the carousel images with a div of class "tint"
});

//animate the contents of the search bar
var txt = "Search by name, major, or cohort.";
var timeOut;
var txtLen = txt.length;
var char = 0;
$('#search').attr('placeholder', '|');
(function typeIt() {
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function () {
        char++;
        var type = txt.substring(0, char);
        $('#search').attr('placeholder', type + '|');
            typeIt();

        if (char == txtLen) {
            $('#search').attr('placeholder', $('#search').attr('placeholder').slice(0, -1)) // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);
}()
);

//shuffle takes an array and shuffles it
function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

//load 20 random profiles
function loadRand(){
    $.getJSON('/profiles.json', function(data){
        rand = ""
        randProfiles = shuffle(data.profiles);
        for (var i = 0; i < 20; i++) {
            var template = $('#profile-preview-template').html();
            rand += Mustache.render(template, randProfiles[i]);
        }
        $('#profile-results').html(rand);
    });
};
loadRand(); //load random profiles on refresh

//if search is empty load 20 random profiles
$('#search').keyup(function() {
    var searchField = $('#search').val();
    if (searchField == ''){
        loadRand();
    }
});

}); //end of main function

Answer 1

将div的id从item1更改为＆＃34; myModal＆＃34;当你使用data-target =＆＃34; #myModal＆＃34;在你的代码中。

Bootstrap Modal - 窗口变暗但没有模态

1 个答案: