0

2 つのモーダル ウィンドウを実装しようとしています。最初のモーダル ウィンドウには、連絡先フォームが含まれます。ユーザーが送信をクリックすると、最初のモーダル ウィンドウが消え、直後に新しいモーダル ウィンドウが表示されるようにします。

私の状況では、送信ボタンが押された後、最初のモーダルが消え、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>

2 番目のモーダル

<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');
$(document).ready(function()
{
    $(".box").hide();
    a.click(関数(){
        $(this).next(".box").slideToggle(600);
        $(this).removeClass("sub_heading");
    });
    a.hover(
     関数 （） {
       $(this).addClass("sub_heading");
     }、
     関数 （） {
       $(this).removeClass("sub_heading");
     }
    );  
});

//送信ボタン
$("#form-submit").click(関数(){
    $("#myModal").modal('hide'); //最初のモーダルを隠す
    $("#messageSentModal").modal('show'); // 2 番目のモーダルを表示
});
4

2 に答える 2

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 に答える