需要模态代码来执行一些额外的代码

时间:2016-08-02 14:23:09

标签: jquery

我有一个模态窗口可以正常工作,但在打开时我希望它还执行一些额外的命令,我没有运气这样做。当你查看我的javascript时,在顶部附近你会看到一些警告'现在代表我试图执行的代码。如何在我的模态窗口打开后执行此附加命令。谢谢。

HTML

<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">One Minute Meditation Video</a>

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/F6eFFCi12v8" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     
</div>

JS

<script>

    $(document).ready(function(){
        <!--We have to pull the global variables from localStorage-->
        var name = localStorage.getItem('name');
        var email = localStorage.getItem('email');
        var act1 = "the Mindfulness page";
        //start the 'launched' function
        launched(email, name, act1);
    });


    $("#myModal").on("show", function () {
        alert("Hey");
    });



    //Sending the 'launched' statement
function launched(actorEmail, actorName, activ) {
            var stmt = new ADL.XAPIStatement(
                new ADL.XAPIStatement.Agent('mailto:' + actorEmail, actorName),
                new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched'),
                new ADL.XAPIStatement.Activity('act:http://example.com/2016/06/resiliency.html', activ,
                    'Clicked to move to a page in the resiliency training.')  
            );
            //generates a unique ID for the statement
            stmt.generateId();
            //Other contextual information about the Activity
            stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('http://www.example.com/articles/34257') );
            //Registration: An instance of a learner experiencing a particular Activity.
            stmt.generateRegistration();
            configLRS();
            sendTheStatement(stmt);
}

    //this tells the app where to send the xAPI statements
function configLRS() {
    ADL.XAPIWrapper.changeConfig({
                'endpoint': 'https://lrs.adlnet.gov/xapi/',
                'user': '',
                'password': '',
                'auth': ''
            });
}

//fires off the statement to the LRS
function sendTheStatement(stmt) {
    ADL.XAPIWrapper.sendStatement(stmt);
}

/* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');

    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });

    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });

</script>

1 个答案:

答案 0 :(得分:0)

一种解决方案可能是在按钮上设置ID,然后挂钩点击事件

$("#myModal").on("show", function () {
alert("Hey");  });

而不是

var canvas = window._canvas = new fabric.Canvas('c');

var circle = new fabric.Circle({
  left: 50,
  top: 50,
  radius: 25,
  fill: 'rgba(0,255,0,0.5)',
});


circle.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  tr: false,
  tl: false,
  br: false,
  bl: false,
  mtr: true //the rotating point (defaut: true)
});

canvas.add(circle);