Close Bootstrap Modal Popup on HTML Button Click using data-dismiss

fr3eddy

SOLVED CLOSED ACTIVE ANSWERED
User: fr3eddy
Posted: on Dec 12, 2017 10:10 PM
Forum: Bootstrap
Answer: 1
Views: 17436

i have a problem. i use this code

<script>
      $('#myModal').modal({ backdrop: 'static', keyboard: false })
</script>

But if click outside the modal it close. I need to close only with button because i need the info that give me the moda.

<div id="myModal" class="modal" data-keyboard="false" data-backdrop="static">
    <!-- Modal content -->
        <div class="modal-content" data-backdrop="static">
            <div class="modal-header header-cvv">
                <span class="close">×</span>
                <h2>Please enter the CVV number</h2>
            </div>
            <div class="modal-body">
                @Html.Label(SantaFeCounty.Resources.Home.CVVValidation, new { @style = "display:none; font-weight:100;", @class = "text-danger field-validation-error", id = "lblCVV" })
                <br />
                <input type="text" id="cvv" maxlength="4" autofocus required />
            </div>
            <div class="modal-footer">
                <div id="buttons">
                    <input class="btn btn-primary" type="submit" value="Process" onclick="submitForm() " />
                    <button class="btn btn-primary" value="" onclick="javascript: modal.style.display = 'none'; return false;" style="cursor: pointer; width: 150px;">Cancel</button>
                </div>
            </div>
        </div>
</div>

plz help me

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Dec 15, 2017 12:42 AM
Modified: on Dec 15, 2017 12:45 AM
Report

Hi fr3eddy,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <div class="row">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch modal
            </button>
            <div id="myModal" class="modal" data-keyboard="false" data-backdrop="static">
                <!-- Modal content -->
                <div class="modal-content" data-backdrop="static">
                    <div class="modal-header header-cvv">
                        <span class="close">×</span>
                        <h2>
                            Please enter the CVV number</h2>
                    </div>
                    <div class="modal-body">
                        CVV Validation
                        <br />
                        <input type="text" id="cvv" maxlength="4" autofocus required />
                    </div>
                    <div class="modal-footer">
                        <div id="buttons">
                            <input class="btn btn-primary" id="btnSubmit" type="submit" value="Process" data-dismiss="myModal" />
                            <button class="btn btn-primary" id="btnCancel" value="" style="cursor: pointer; width: 150px;"
                                data-dismiss="myModal">
                                Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

Close Bootstrap Modal Popup on HTML Button Click using data-dismiss

Company

Explore

Follow us

Contact Us