Hi all,

i have implemented a popup modal in the checkbox but every time the popup modal occur when the checkbox is selected. I only wanted it to occur for the first time. How should i approach this. The followings are my codes:

 <input type="checkbox" id="checkbox-1" name="checkbox"
        data-toggle="modal" href="#content-warning"
          value="ticked" checked> select content<r>

   <div class="control-popup modal fade" id="content-warning"
          tabindex="-1" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close"
                            data-dismiss="modal"
            aria-hidden="true">&times;</button>
            <h4 class="modal-title">Are you sure you wanna do
            that?</h4>
        </div>
        <div class="modal-body">
            <p>This is my content</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary"
                data-dismiss="modal">close</button>
            </div>
        </div>
    </div>
</div>

Please help. Thanks

Last updated 7 years ago

You can use modal's events and add some JS code to prevent repeating (like disable checkbox or empty href, ...).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Check Bootstrap's docs.