Question

下面是我的HTML模型，

以下是我的JavaScript。

$(document).ready(function() {
alert("Script is on");
$("#portfolioModal1").on('show.bs.modal', function () {
    alert('The modal is about to be shown.');
});

$( "#portfolioModal1" ).on('shown', function(){
    alert("Shown!");
});
});

$("button").click(function find_route_time()
{
    // This function is tested and is working fine.
});

我尝试过许多教程的解决方案，但这不起作用。我无法理解为什么？我的javascript应该在模型打开时生成警报但没有任何反应。

以下是链接，

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" data-target="#portfolioModal1">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
             <img src="img/portfolio/EAST-CLICK.jpg" class="img-responsive" alt="">
                </a>

Answer 1

以下是代码的修复：

在您的html代码中添加按钮，如下所示：

<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

用以下代码替换您的JS代码：

$(document).ready(function(){

 $("#myBtn").click(function(){
    $("#portfolioModal4").modal("show");
});

  $("#portfolioModal4").on('show.bs.modal', function () {
        alert('The modal is about to be shown.');
});

  $("#portfolioModal4").on('shown.bs.modal', function () {
        alert('The modal is fully shown.');
});
 });

注意 - 如果你想在页面加载事件上打开弹出窗口，那么只需从脚本中删除click事件，但问题是它只是捕获shown事件。

如果您觉得这很有用，请告诉我。

这是完成的测试文件。

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
     <a href="#portfolioModal1" data-toggle="modal" data-target="#portfolioModal1">Open Popup</a>
     <!-- Modal -->
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
            .....................SOME CODE.....................
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        alert("Script is on");
        $("#portfolioModal1").on('show.bs.modal', function () {
            alert('The modal is about to be shown.');
        });

        $("#portfolioModal1").on('shown.bs.modal', function () {
            alert("Shown!");
        });
    });
    $("button").click(function find_route_time() {
        // This function is tested and is working fine.
    });
</script>
</body>
</html>

无法使用Javascript

1 个答案: