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');
 });

由于我的代码很长，我只是从谷歌复制了一个模态，但我添加了Save按钮，所以这是我的模态正在使用的真实Save按钮。

由于

修改

我将id号码更改为字母，所以现在代码中不包含任何以number开头的id，谢谢。

PS仍然需要帮助= /

修改

我也尝试了这个，它没有用

$(document).ready(function(){

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

});

Answer 1

HTML

<div id="someModalId" 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();
  $('#someModalId').modal('hide');
});

选择一个名称或ID
将select的值设置为全局变量。如果收到错误，请确保将变量声明在顶部。

Answer 2

我不确定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 3

<button id="save" class="btn btn-width bkgrnd-cyan save-details" type="button" name="save-details" onclick="save()" data-toggle="modal" data-target="#myModalList" data-dismiss="modal">Save</button>

这对我来说非常有效，这是一种简单的方法。在onclick之后，我使用了数据切换，数据目标和数据关闭

在js函数save（）中，我不需要编写任何代码，只需将数据保存到我的数据库中

// Insere notas na base de dados
function save() {
  console.log("func guardar");
  if ($("#message-text").val() == "") {
    alert("Texto vazio");
  } else {
    $(document).ready(function () {
      $.ajax({
        method: "POST",
        url: "../portal/portalphp/notas.php",
        data: {
          num: num,
          text: $("#message-text").val()
        }
      }).done(function (msg) {
        if (msg == 1) {
          //alert("Nota guardada com sucesso");
          readyNotas(num);
          console.log("func guardar done == 1");
        } else {
          alert("Erro: não foi possivel guardar");
        }
      });
      texto.value = "";
    });
    console.log("func guardar ready");
  }
}

Answer 4

首先，您需要从按钮中删除onclick="save()"。当您直接使用点击功能$('#save').click(function()...

时，您不需要这样做

正如@Eshwaren在评论中指出的那样，您无法使用数字来启动id，因此您也需要修复它。

要从选择中获取值，您必须能够识别它。一个简单的解决方案是为您的select元素提供ID。

例如：

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

在代码中，您可以将select元素的值赋给变量。

例如：

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

然后，您可以在代码中的其他位置使用该变量。

解决这个问题的可能性还有很多，但问题的根源是能够识别代码中的选择元素并记录它们各自的值。

Answer 5

那是我的模态窗口

ModelState.Remove<ViewModel>(x => x.SomeProperty);

尝试此操作来关闭或隐藏窗口

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

Answer 6

我终于在里卡多·阿尔梅达（Ricardo Almeida）的提示下完成了这项工作：

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

如何保存和关闭bootstrap模式？

6 个答案: