Javascript 如何保存和关闭引导模式？

How to save and close a bootstrap modal?

提问by JMASTER B

This question have many answers out there but none of those answers solved my problem. I have a modal with some <select>tags. I am trying to save the values from the select options. after they click Savethe modal should close but not submitthe result yet because the user still need to review stuff after they click saveon the modal.

这个问题有很多答案，但这些答案都没有解决我的问题。我有一个带有一些<select>标签的模态。我正在尝试从select options. 在他们点击Save模态后应该关闭但还没有submit结果，因为用户在点击save模态后仍然需要查看内容。

HTML

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

JS

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

Since my code is really long, I just copied a modal from google but I added my Savebutton, so this is the real Savebutton that my modal is using.

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

Thanks

谢谢

EDIT

编辑

I changed the id number to letters so now the code doesn't include any id starting with number, thanks.

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

PS still need help =/

PS还需要帮助=/

EDIT

编辑

I also tried this one and it did not work

我也试过这个，但没有用

$(document).ready(function(){

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

}); 

采纳答案by Asenar

I'm not sure the id=1is fine, but you can use this code to simulate a click on the close button (or you can add an id or a class to it).

我不确定这id=1是否正常，但是您可以使用此代码模拟单击关闭按钮（或者您可以向其添加 id 或类）。

You may have to remove the onclick="save()"

您可能需要删除 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();

});

回答by Eshwaren Manoharen

HTML

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

JS

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

1. Give your select a name or id
2. Set the value of select to a global variable. Make sure to declare the variable at the top if you are getting an error.

1. 给您的选择一个名称或 ID
2. 将 select 的值设置为全局变量。如果出现错误，请确保在顶部声明变量。

回答by Ricardo Almeida

<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>

this worked very well for me, and its a simple way to do it. after the onclick I used the data-toggle, data-target and data-dismiss

这对我来说非常有效，而且是一种简单的方法。在点击之后我使用了数据切换、数据目标和数据解除

in the js function save() I didn't need to code anything but to save data into to my database

在 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");
  }
}

回答by whipdancer

First, you need to remove onclick="save()"from your button. You don't need that when you are using the on click function directly $('#save').click(function()...

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

As was pointed out in the comments by @Eshwaren, you can't use a number to start an id, so you need fix that as well.

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

To get the value from a select, you have to be able to identify it. A simple solution would be to give your select element an ID.

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

For example:

例如：

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

In your code, you can then assign the value of the select element to a variable.

在您的代码中，您可以将 select 元素的值分配给一个变量。

For example:

例如：

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

You can then use that variable elsewhere in your code.

然后，您可以在代码的其他地方使用该变量。

There are many more possibilities for solving this, but the root of the issue is being able to identify the select elements in code and recording their respective values.

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

回答by Abhay Deshmukh

thats my modal window

那是我的模态窗口

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

try this to close or hide the window

试试这个来关闭或隐藏窗口

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

回答by tomb

I finally got this working with a hint from Ricardo Almeida:

我终于在 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>