在引导模式弹出窗口上添加关闭链接

时间:2014-04-15 03:33:38

标签: javascript jquery twitter-bootstrap

我有一个弹出窗口表单,我使用bootstrap模式使其工作。这是窗口的id和类。

<div class="modal hide" id="myModal">

<a href="#" class="close-modal" id="close-modal">Close</a>

<div class="modal-header">
<p>Hello there!</p>
</div>


<div class="modal-body">
<!--email form-->
</div>

</div>

我使用这个jquery代码使它工作。但仍然无法发挥作用。

<script type="text/javascript">
$(document).ready(function(){
    $('#myModal').hide(); //hides the modal div to be displayed later
    $('#close-modal').on('click', function(){ 
        $('#myModal, #close-modal').toggle();
        $('#myModal').modal();
    });

    $('#close-modal').on('click', function(){ 
        $('#myModal').modal.close();
        $('#myModal, #close-modal').toggle();
    });
});
</script>

2 个答案:

答案 0 :(得分:0)

尝试:

<script type="text/javascript">
$(document).ready(function(){
    $('#myModal').hide(); //hides the modal div to be displayed later

    $(document).on('click', '#close-modal' , function(){ 
        $('#myModal').modal('hide');
    });
});
</script>

答案 1 :(得分:0)

<script type="text/javascript">
      $(document).ready(function(){
        $('#myModal').hide(); //hides the modal div to be displayed later
        $('#close-modal').on('click', function(){ 
           //Hide model with animation->$("#myModal").animate({opacity:'hide'}, 400);
            $("#myModal").hide();
        });  
    });
</script>

上面的代码将隐藏关闭链接上的模态弹出窗口单击检查工作示例以获取更多详细信息。http://jsfiddle.net/NB3JT/light/