2015-06-05 3 views
0

В настоящее время у меня есть страница, которая запрашивает у пользователя, хотят ли они на самом деле что-то сделать. В настоящее время он работает следующим образом:Диалог подтверждения Bootstrap

<a href="/do/this/thing/1234" onclick="return promptUser();">Do This Thing</a> 
<script type="text/javascript"> 
    function promptUser() { 
    return confirm("Are you sure you want to do this thing?"); 
    } 
</script> 

Теперь пользователь хочет добавить графику и т. Д. В диалог. По этой причине я хочу использовать окно Bootstrap Modal, поскольку оно есть в другом месте моего кода. Я добавил следующее:

<div id="confirmDialog" class="modal hide fade"> 
    <div class="modal-body"> 
     Are you sure you want to do this thing? 
    </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn btn-primary" id="confirmed">Yes</button> 
     <button type="button" data-dismiss="modal" class="btn">No</button> 
    </div> 
</div> 

Однако я не уверен, как подключить взаимодействие со ссылкой. Если пользователь говорит «Нет», я хочу остаться на странице. Если пользователь говорит «Да», я хочу перенаправить пользователя на URL-адрес в href. Как мне настроить это?

Благодаря

+0

Какой самозагрузки версию вы используете? –

+0

@ KaushikThanki Version 3.1 –

+0

проверить мой ответ –

ответ

1

HTML

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    click me 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="confirm">confirm</button> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$('#confirm').on('click', funciton(){ 
    window.location.href = "http://stackoverflow.com"; 
}); 
0
$('#confirmed').click(function(){ 
location.href = "some URL " 
}); 

Он пробудет на нет, поскольку это поведение по умолчанию или начальной загрузки модальный и мы прикрепили событие на кнопке да на упоминании выше.

Смежные вопросы