Как сохранить и закрыть bootstrap modal?

Question

У этого вопроса есть много ответов, но ни один из этих ответов не решил мою проблему. У меня модальный с тегами <select>. Я пытаюсь сохранить значения из select options. после того, как они нажмут Save, модальный должен закрыть, но не submit результат все же, потому что пользователю все равно нужно просмотреть материал после того, как они нажмут save на модальном.

HTML

<!-- Modal --> 
<div id="1" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;  </button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    //select tags go here 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button> 
    </div> 
</div> 

JS

$('#save').click(function() { 
$('#1').modal('hide'); 
}); 

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

Благодаря

EDIT

Я изменил номер документа на письма, так что теперь код не включает в себя идентификатор, начиная с номером, спасибо.

PS еще нужна помощь =/

EDIT

Я также попытался это один и он не работает

$(document).ready(function(){ 

$('#save').click(function(){ 
$('#modal_1').modal('hide');//modal_1 is the id 1 
}); 

}); 

Answer 1

Я не уверен, что id=1 в порядке, но вы можете использовать этот код для имитации щелчка по кнопке закрытия (или вы можете добавить к нему id или класс).

Вы, возможно, придется удалить onclick="save()"

data = {}; 
$("#save").on("click", function(e){ 
    e.preventDefault(); // prevent de default action, which is to submit 
    // save your value where you want 
    data.select = $("#exampleSelect").value(); 
    // or call the save function here 
    // save(); 
    $(this).prev().click(); 

}); 

Answer 2

HTML

<div id="1" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;  </button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <select id="exampleSelect"> 
    </select> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button id="save" onclick="save()" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details">Save</button> 
    </div> 
</div> 

JS

$('#save').click(function() { 
    $select_value = $("#exampleSelect").value(); 
    $('#1').modal('hide'); 
}); 

1. Дайте выбрать имя или идентификатор
2. Установите значение выбора глобальной переменной. Обязательно объявите переменную наверху, если вы получаете ошибку.

Answer 3

Во-первых, вам нужно удалить onclick="save()" из вашей кнопки. Вам это не нужно, когда вы используете функцию on click напрямую $('#save').click(function()...

Как было указано в комментариях @Eshwaren, вы не можете использовать номер, чтобы начать id, так что вам также нужно исправить это ,

Чтобы получить значение с помощью выбора, вы должны уметь его идентифицировать. Простым решением было бы дать вашему элементу выбора ID.

Например:

<div class="modal-body"> 
    <select id="data_1"> 
    </select> 
</div> 

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

Например:

var data_1; 
$('#save').click(function() { 
    data_1 = $("#data_1").value(); 
    $('#modalid').modal('hide'); 
}); 

Вы можете использовать эту переменную в другом месте в коде.

Есть еще много возможностей для решения этой проблемы, но корень проблемы заключается в возможности идентифицировать элементы выбора в коде и записывать их соответствующие значения.

Answer 4

вот мое модальное окно

$(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     autoOpen: false, 
     title: "Column Preferences", 
     button: "save", 
     width: 750, 
     height: 620 
}); 

попробовать это, чтобы закрыть или скрыть окно

$('#dialog').dialog('close');