Question

我正在尝试实现2个模态窗口。第一个模态窗口将包含联系表单。当用户点击提交时，我希望第一个模态窗口消失，然后出现一个新的模态窗口。

在我的情况下，按下提交按钮后，第一个模态消失，第二个模态会短暂出现然后消失。

我确定我只有bootstrap-modal.js

非常感谢任何帮助或指导！谢谢

第一模态

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Contact</h3>
    </div>
    <div class="modal-body">

    <form class="form-horizontal">  
            <fieldset>  
                <div class="control-group">  
                    <label class="control-label" for="input01">Name</label>  
                    <div class="controls">  
                      <input type="text" class="input-xlarge" id="input01" name = "name">  
                    </div>  
                </div> 
                <div class="control-group"> 
                    <label class="control-label" for="input01">E-mail</label>  
                    <div class="controls">  
                      <input type="text" class="input-xlarge" id="input01">  
                    </div>  
                </div>  

              <div class="control-group">  
                <label class="control-label" for="textarea">Message</label>  
                <div class="controls">  
                  <textarea class="input-xlarge" id="textarea" rows="3"></textarea>  
                </div>  
              </div>  
            </fieldset>  
    </div>
    <div class="modal-footer">
        <button id= "form-submit" type="submit" class="btn btn-primary">Send</button>  
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>  
    </div>
    </form>
</div>

第二模态

<div id="messageSentModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Success!</h3>
            <p>Your Message has been sent!</p>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>  
    </div>

</div>

的Javascript

<script src="index_files/jquery.js"></script>
<script src="index_files/bootstrap-transition.js"></script>
<script src="index_files/bootstrap-alert.js"></script>
<script src="index_files/bootstrap-modal.js"></script>
<script src="index_files/bootstrap-dropdown.js"></script>
<script src="index_files/bootstrap-scrollspy.js"></script>
<script src="index_files/bootstrap-tab.js"></script>
<script src="index_files/bootstrap-tooltip.js"></script>
<script src="index_files/bootstrap-popover.js"></script>
<script src="index_files/bootstrap-button.js"></script>
<script src="index_files/bootstrap-collapse.js"></script>
<script src="index_files/bootstrap-carousel.js"></script>
<script src="index_files/bootstrap-typeahead.js"></script>

Javasscript自定义代码


a = $(".span4").find('h3'); 
$(document).ready(function()
{
    $(".box").hide();
    a.click(function(){
        $(this).next(".box").slideToggle(600);
        $(this).removeClass("sub_heading");
    });
    a.hover(
     function () {
       $(this).addClass("sub_heading");
     }, 
     function () {
       $(this).removeClass("sub_heading");
     }
    );  
});

//submission button
$("#form-submit").click(function(){
    $("#myModal").modal('hide'); //hide first modal
    $("#messageSentModal").modal('show');   //show second modal
});

Answer 1

这是正常行为，因为您正在提交表单。你把你的模态隐藏并显示在提交函数中，因此javascript执行它们然后提交表单，使页面刷新。这就是为什么你只能简单地看到第二个模态。如果你在提交函数的末尾添加“return false”，你可以一个接一个地看到你的两个模态。（但你的表单不会这样提交）我看到这个问题的解决方案是使用AJAX提交，以便页面不会刷新。

Answer 2

这似乎是当前版本的Bootstrap中的一个错误 - 我刚刚能够重现该错误，但是，如果你只是包含模态和转换js文件它应该“正常工作”。

您可以在此处查看“工作”解决方案：http://jsfiddle.net/Kyz5d/1/

注意：对于“启动模式框”按钮，代码本身没有变化 - 这段代码只是因为jsfiddle.net链接必须附带代码：顺便说一句，我已经使用jQuery 1.8.2测试了该代码

<script src="index_files/jquery.js"></script>
<script src="index_files/bootstrap-transition.js"></script>
<script src="index_files/bootstrap-modal.js"></script>

模态窗口快速消失

2 个答案: