Question

这应该是一个简单的解决方法。我不确定为什么myModal不会隐藏并让myModal1占据它的位置。看起来代码是正确的，但必须有我遗漏的东西。我尝试将代码缩小到大多数基本元素。

<script>
$(function(){
$(".remove").click(function(){
$('#yes_delete').click(function() {
    $("#myModal").hide();
    $("#myModal1").show();
  }); 
});
</script>


<a data-toggle="modal" data-target="#myModal" data-backdrop="false" href="#myModal" id="15" class="remove" title="Remove"><span class="hidding">Remove</span></a>

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Are you sure?</h4>
        </div>
        <div class="modal-body">
            <h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
        </div>
        <div class="modal-footer">

        <form method="POST">
            <input id="yes_delete" value="Yes " name="deleteaudit" type="button">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </form> 



        </div>
    </div>
</div>
</div>





<div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Success</h4>
        </div>
        <div class="modal-body">
            <h3>You have successfully DELETED the audit.</h3>
        </div>
        <div class="modal-footer">

        <form method="POST">

            <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
        </form> 




        </div>
    </div>
</div>
</div>

Answer 1

两件事 - 首先看起来很糟糕的UX / UI迫使一个模态关闭然后在同一个动作中打开另一个 - 更好的是只有一个模态并切换显示或隐藏的div。

第二 - 它在这里很早，而且我可以非常专注于完全阅读你的代码，但是你将一个点击事件嵌套在另一个内部并且没有关闭文档准备就绪。这可能就是为什么你想要的效果不是＆发生了。你只需要一个点击处理程序。

关闭文档 -

<script>
$(function(){
    $(".remove").click(function(){
           $('#yes_delete').click(function() {
               $("#myModal").hide();
              $("#myModal1").show();
           }); 
     });
});
</script>

或只有一个点击处理程序 - 哪个是更好的选择。（如果你需要但不嵌套在第一个中，则添加第二个。）：

<script>
$(function(){
    $('#yes_delete').click(function() {
         $("#myModal").hide();
        $("#myModal1").show();
     }); 
});
</script>

如果你想做一个单击处理程序（在类上），那么你需要传递一个参数（例如点击按钮的id或值）来区分动作a和动作b。）我强烈建议不要切换模态 - 但切换div - 或在一个模态内的类似东西。

Jquery，你怎么能开一个新的Modal？

1 个答案: