[jquery] Twitter 부트 스트랩을 사용하여 모달 / 대화 상자에서 삭제를 확인 하시겠습니까?

Program / 글쓴이

데이터베이스 행에 연결된 행의 HTML 테이블이 있습니다. 각 행에 대해 “행 삭제”링크를 갖고 싶지만 사전에 사용자에게 확인하고 싶습니다.

Twitter Bootstrap 모달 대화 상자를 사용하여이를 수행 할 수있는 방법이 있습니까?

답변

레시피 얻기

이 작업을 위해 이미 사용 가능한 플러그인 및 부트 스트랩 확장을 사용할 수 있습니다. 또는 단 3 줄의 코드로 확인 팝업을 만들 수도 있습니다 . 확인 해봐.

삭제 확인을 원하는 이 링크 ( ) data-href대신 href버튼 또는 버튼이 있다고 가정 해 보겠습니다.

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>

<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
    Delete record #54
</button>

여기서 #confirm-deleteHTML의 모달 팝업 div를 가리 킵니다. “OK”버튼이 다음과 같이 구성되어 있어야합니다.

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>

이제 삭제 작업을 확인하려면이 작은 자바 스크립트 만 있으면됩니다.

$('#confirm-delete').on('show.bs.modal', function(e) {
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});

따라서 show.bs.modal이벤트 삭제 버튼 href은 해당 레코드 ID를 가진 URL로 설정됩니다.

데모 : http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

POST 레시피

경우에 따라 GET 대신 POST 또는 DELETE 요청을 수행해야 할 수도 있습니다. 너무 많은 코드없이 여전히 간단합니다. 이 방법으로 아래 데모를 살펴보십시오.

// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {

  var $modalDiv = $(e.delegateTarget);
  var id = $(this).data('recordId');

  $modalDiv.addClass('loading');
  $.post('/api/record/' + id).then(function() {
     $modalDiv.modal('hide').removeClass('loading');
  });
});

// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
  var data = $(e.relatedTarget).data();
  $('.title', this).text(data.recordTitle);
  $('.btn-ok', this).data('recordId', data.recordId);
});

코드 스 니펫 표시

데모 : http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview

부트 스트랩 2.3

다음은 Bootstrap 2.3 모달에 대한이 질문에 대답했을 때 작성한 코드의 원래 버전입니다.

$('#modal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});

데모 : http://jsfiddle.net/MjmVr/1595/

답변

http://bootboxjs.com/-Bootstrap 3.0.0의 최신 기능

가장 간단한 예 :

bootbox.alert("Hello world!");

사이트에서 :

라이브러리는 기본 JavaScript와 동일한 기능을 제공하도록 설계된 세 가지 방법을 제공합니다. 정확한 메소드 서명은 레이블을 사용자 정의하고 기본값을 지정하기 위해 다양한 매개 변수를 사용할 수 있기 때문에 유연하지만 가장 일반적으로 다음과 같이 호출됩니다.

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)

다음은 실제 코드 조각입니다 (아래의 “코드 조각 실행”클릭).

$(function() {
  bootbox.alert("Hello world!");
});
<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

스 니펫 확장

답변

  // ---------------------------------------------------------- Generic Confirm  

  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {

    var confirmModal =
      $('<div class="modal hide fade">' +
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +

          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +

          '<div class="modal-footer">' +
            '<a href="#" class="btn" data-dismiss="modal">' +
              cancelButtonTxt +
            '</a>' +
            '<a href="#" id="okButton" class="btn btn-primary">' +
              okButtonTxt +
            '</a>' +
          '</div>' +
        '</div>');

    confirmModal.find('#okButton').click(function(event) {
      callback();
      confirmModal.modal('hide');
    });

    confirmModal.modal('show');
  };

  // ---------------------------------------------------------- Confirm Put To Use

  $("i#deleteTransaction").live("click", function(event) {
    // get txn id from current table row
    var id = $(this).data('id');

    var heading = 'Confirm Transaction Delete';
    var question = 'Please confirm that you wish to delete transaction ' + id + '.';
    var cancelButtonTxt = 'Cancel';
    var okButtonTxt = 'Confirm';

    var callback = function() {
      alert('delete confirmed ' + id);
    };

    confirm(heading, question, cancelButtonTxt, okButtonTxt, callback);

  });

답변

나는 매우 오래된 질문을 알고 있었지만 오늘 부트 스트랩 모달을 처리하는보다 효율적인 방법이 궁금했습니다. 나는 약간의 연구를하고 위 링크에서 찾을 수있는 솔루션보다 더 나은 것을 발견했습니다.

http://www.petefreitag.com/item/809.cfm

먼저 jquery를로드하십시오.

$(document).ready(function() {
    $('a[data-confirm]').click(function(ev) {
        var href = $(this).attr('href');

        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        }
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

그런 다음 href에 대한 질문 / 확인을 요청하십시오.

<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>

이런 식으로 확인 모달이 훨씬 보편적이므로 웹 사이트의 다른 부분에서 쉽게 재사용 할 수 있습니다.

답변

@Jousby 덕분에 솔루션 필자의 작업도 제대로 처리 할 수 ​​있었지만 공식 예제 에서 설명한대로 솔루션의 Bootstrap 모달 마크 업을 조금 개선하여 올바르게 렌더링해야한다는 것을 알았습니다 .

그래서 confirm다음은 잘 작동하는 일반 함수 의 수정 된 버전입니다 .

/* Generic Confirm func */
  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {

    var confirmModal =
      $('<div class="modal fade">' +
          '<div class="modal-dialog">' +
          '<div class="modal-content">' +
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +

          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +

          '<div class="modal-footer">' +
            '<a href="#!" class="btn" data-dismiss="modal">' +
              cancelButtonTxt +
            '</a>' +
            '<a href="#!" id="okButton" class="btn btn-primary">' +
              okButtonTxt +
            '</a>' +
          '</div>' +
          '</div>' +
          '</div>' +
        '</div>');

    confirmModal.find('#okButton').click(function(event) {
      callback();
      confirmModal.modal('hide');
    });

    confirmModal.modal('show');
  };
/* END Generic Confirm func */

답변

나는 이것이 유용하고 사용하기 쉽고, 예쁘게 보인다 : http://maxailloud.github.io/confirm-bootstrap/ .

이를 사용하려면 페이지에 .js 파일을 포함시킨 후 다음을 실행하십시오.

$('your-link-selector').confirmModal();

적용 할 수있는 다양한 옵션이 있습니다. 삭제 확인을 위해 더 잘 보이게하기 위해 다음을 사용합니다.

$('your-link-selector').confirmModal({
    confirmTitle: 'Please confirm',
    confirmMessage: 'Are you sure you want to delete this?',
    confirmStyle: 'danger',
    confirmOk: '<i class="icon-trash icon-white"></i> Delete',
    confirmCallback: function (target) {
         //perform the deletion here, or leave this option
         //out to just follow link..
    }
});

답변

bootbox.js 라이브러리를 사용하여 이러한 유형의 작업을 쉽게 처리 할 수 ​​있습니다. 처음에는 bootbox JS 파일을 포함해야합니다. 그런 다음 이벤트 핸들러 함수에서 간단히 다음 코드를 작성하십시오.

    bootbox.confirm("Are you sure to want to delete , function(result) {

    //here result will be true
    // delete process code goes here

    });

공식 bootboxjs 사이트