Question

我有一个需要在用户想要返回上一页时打开的bootstrap模式。基本上，该过程的第一步是用户单击按钮并弹出模态，然后在模态中输入值后，用户将希望进入下一步，其中另一个模态将基本确认是什么用户已输入上一个模态。如果用户想要更改他/她的答案，则可以返回上一页然后更新他/她的答案。 我的代码中的问题是它可以返回上一页，但模式没有打开。

关于第一个过程的HTML代码（第一个模式）：

<div class="modal fade bs-example-modal-lg" id="modal_insert" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
        <h4 class="modal-title" id="myModalLabel">Update Hearing Details</h4>
        </div>
            <form id="update_memo" class="form-horizontal form-label-left calender" name = "update_memo" enctype="multipart/form-data" method="post" role="form" novalidate>
                <div class="modal-body">
                    <div class="d item form-group">
                    <label class="col-sm-2 control-label">Hearing Number</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="hearing_number" name="hearing_number" readonly="readonly"/>
                        </div>
                    </div>
                        <div class="d item form-group">
                            <label class="col-sm-2 control-label">Attendance<span class="required">*</span> </label>
                            <div class="col-sm-8" style = "margin-top: 7px;">

                                <input type="radio" id = "both_attendance"  name="attendance" value="2" checked > Both Parties Showed Up <br />
                                <input type="radio" id = "resp_attendance" name="attendance" value="0" > Respondent Did Not Show Up <br />
                                <input type="radio" id = "comp_attendance"  name="attendance" value="1" > Complainant Did Not Show Up <br />

                            </div>
                        </div>
                        <div class="m item form-group">
                            <label class="col-sm-2 control-label">Memo <span class="required">*</span></label>
                            <div class="col-sm-8">
                                <textarea rows="4" class="form-control" id="memo" name="memo" required="required"/></textarea>
                            </div>
                        </div>

                </div>
                <div class="modal-footer" style="margin:0;">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 4px;">Close</button>
                    <button id="send" type="submit" class="btn btn-success" name="update_memo">Save Record</button>
                </div>
            </form>
        </div>
    </div>
</div>

2ND MODAL：

<?php
include 'config.php';
if(isset($_POST['update_memo'])){
    $id = isset($_GET['id'])? $_GET['id'] : "";
    $hearingNo = $_POST['hearing_number'];
    $memo = $_POST['memo'];
    $attendance = $_POST['attendance'];

 ?>

<div class="modal fade bs-example-modal-lg" id="modal_confirm" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #f0ad4e; color:#fff">
                <h4 class="modal-title" id="myModalLabel">Memo Confirmation </h4>
            </div>
            <form id="update_memo" class="form-horizontal form-label-left calender" name = "update_memo" enctype="multipart/form-data" method="post" role="form" novalidate>
                <div class="modal-body" style="display:none">
                    <div class="d item form-group">
                        <label class="col-sm-2 control-label">Hearing Number</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="h_num" name = "h_num" value="<?php echo $hearingNo; ?>" readonly="readonly"/>
                        </div>
                    </div>
                </div>              
                <div class=" item form-group">
                    <label class="control-label col-md-5 col-sm-5 col-xs-12" style="left:20px;" ><h4><b>Do you wish to continue with the memo?</b></h4></label>
                    <div class="col-sm-8"></div>
                </div>
                <div class=" item form-group">
                    <label class="control-label col-md-1 col-sm-1 col-xs-12"></label>
                    <div class="col-sm-10">
                        <blockquote style="font-size: 18px; right: 30px; text-align: justify"><?php echo $memo; ?></blockquote>
                    </div>
                </div>

                <div class="modal-footer" style="margin:0;">
                    <button type="button" style="margin-top: 6px;" class="btn btn-dark" name="return" onClick="javascript: history.go(-1); showModal(); ";><i class="fa fa-arrow-circle-o-left m-right"></i>  Return</button>
                    <button id="send" type="submit" class="btn btn-success" name="memo_confirm"><i class="fa fa-check m-right"></i>  Proceed</button>
                </div>
 <?php

  }
  ?>
            </form>
        </div>
    </div>
</div>

调用第一个模式的Javascript代码:(就像这样，因为当用户点击它时，它会传递data-id中的值;这是有效的）

$(document).ready(function(){
    $('#modal_insert').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id');
        //alert(id);
        $("#hearing_number").val(id);
});

2ND MODAL：

$(document).ready(function(){
    $('#modal_confirm').modal('show');
});

在历史之后试图调用模式的功能.GO（-1）

        //not working
        $(document).ready(function(){
            function showModal() {  
            $('#modal_insert').modal('show');
            }
        });
        //alert("OPEN"); 

</script>

我怎样才能做到这一点？我的代码的哪一部分应该改变或调整？非常感谢你提前帮助！

Answer 1

打开bootstrap模式时更改url的哈希值。还会根据哈希值触发模态打开

<script>
// use these codes inside $(document).ready...
$(_modal_id_).on('show.bs.modal', function (e) {
   window.location.hash = "open_modal";
})
if(window.location.hash == "#open_modal") { // edited: "open_model" to "#open_modal"
   var hash = window.location.hash;
   $(_modal_id_).modal('show');
}
</script>

因此，如果用户返回一页（例如http://domain.co/page.php#open_modal） .modal（＆＃39; show＆＃39;）将触发

在onClick

1 个答案: