web-dev-qa-db-ja.com

関数呼び出しJqueryからモーダルを開く方法

私はこのモーダルをBootstrapから追加しました。ボタンを正常に開くにはボタンを追加しますが、本当に必要なのは、自動的に呼び出す関数からこのモーダルを開くことです私の実験は：

_     <button id="RenewCollerctorDateID" class="btn btn-success" style="width: 10%; display: inline;
 padding-right: 10px; float: left;" onclick="RenewCollectorDatePeriod();">renew</button>
_

私のJavaScriptは

_ function RenewCollectorDatePeriod() {
         //   AreYOuSureRenew();        
            var EmpID = $("#<%=ddlFilterCollector.ClientID%>").val();
            if (EmpID == -1) {
                alert("please select one ")
            }
            else {
               alert(EmpID);
              GetCollectorInfo(EmpID);       
            }        
        }
_

その後：

_        function GetCollectorInfo(EmpID) {
       //     AreYOuSureRenew();
            $.ajax({
                type: "POST",
                url: "UnloadingCalendar.aspx/GetCollectorInfo",
                data: JSON.stringify({ EmpID: EmpID }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert(result.d);
                    AreYOuSureRenew();
                    },
                error: function (msg) {
                    alert(msg.d);
                },
                complete: function () {

                }
            })
        }


    function AreYOuSureRenew() {
        alert("opened");
        $('#EnsureModal').modal('show');
    }
_

そしてここで私のモーダル

_    <div class=" modal fade" id="EnSureModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Do ypu need change </h4>
                </div>
                <div class="modal-body">
                    <p>Are u sure from </p>
                    <label id="FromDate"></label>
                    <p>To</p>
                    <label id="ToDate"></label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">no</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
                </div>
            </div>
        </div>
    </div>
_

注意：Document.Readyに$("#EnSureModal").modal('show');を追加すると、ページの読み込み時に緩和され、関数呼び出しで再び表示されますが、関数呼び出しでのみ表示されるようにするにはどうすればよいですか

javascriptjqueryhtml5twitter-bootstrapbootstrap-modal
7
sara adly

私はあなたのコードを読みましたが、あなたはbootstrap=を正しく使用しておらず、あなたが書いたスクリプトも正しくありません。これをチェックしてください。これはあなたを助けるかもしれません。

脚本：

$(document).ready(function(){
    $("#fireme").click(function(){
        $("#EnSureModal").modal();
    });
});

HTML：

<button id="fireme" class="btn btn-default">Fire me up!</button>
<div class="modal fade" id="EnSureModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Do ypu need change </h4>
            </div>
            <div class="modal-body">
                <p>Are u sure from </p>
                <label id="FromDate"></label>
                <p>To</p>
                <label id="ToDate"></label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">no</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">yes</button>
            </div>
        </div>
    </div>
</div>

フィドル

6
claudios