0

我正在尝试实现 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>

Javascript自定义代码

a = $(".span4").find('h3');
$(文档).ready(函数()
{
    $(".box").hide();
    a.点击（函数（）{
        $(this).next(".box").slideToggle(600);
        $(this).removeClass("sub_heading");
    });
    a.悬停（
     功能 （） {
       $(this).addClass("sub_heading");
     },
     功能 （） {
       $(this).removeClass("sub_heading");
     }
    );  
});

//提交按钮
$("#form-submit").click(function(){
    $("#myModal").modal('隐藏'); //隐藏第一个模态
    $("#messageSentModal").modal('show'); //显示第二个模态
});
4

2 回答 2

1

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

于 2013-04-24T12:45:43.573 回答
0

这似乎是当前版本的 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>
于 2013-04-24T08:13:22.840 回答