标签: modal-dialog

我正在构建一个需要在某些情况下显示确认对话框的应用程序.

假设我想删除一些东西,然后我会调度一个动作,deleteSomething(id)因此一些reducer会捕获该事件并填充对话框减速器以显示它.

当这个对话提交时,我怀疑了.

• 该组件如何根据调度的第一个操作调度正确的操作？
• 动作创建者应该处理这个逻辑吗？
• 我们可以在减速机内添加动作吗？

编辑:

使它更清楚:

deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)

createThingB(id) => Show dialog with Questions => createThingBRemotely(id)

所以我正在尝试重用对话框组件.显示/隐藏对话框不是问题,因为这可以在reducer中轻松完成.我想要指定的是如何根据左侧开始流动的动作从右侧调度动作.

我在使用bootstrap的网站上工作.

基本上,我想在主页中使用一个模态,由英雄单元中的按钮召唤.

按钮代码:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

模态代码:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

问题是,只要我点击按钮,模态就会淡入,然后立即消失.

我很感激任何帮助.

另外,如何更改下拉三角形的颜色(朝上,没有悬停)？我正在开发一个基于橙色和棕色的网站,蓝色的东西真的很烦人.

我正在使用jquery-ui-dialog插件

我正在寻找在某些情况下关闭对话框时刷新页面的方法.

有没有办法从对话中捕获一个关闭事件？

我知道我可以在单击关闭按钮时运行代码但不包括用户使用escape或右上角的x关闭.

我已经看过几个关于bootstrap模态的问题,但没有一个完全像这样,所以我会继续.

我有一个模态,我打电话就像这样......

$(".modal-link").click(function(event){
  $("#modal-content").modal('show');
});

这工作正常,但是当我显示模态时我想要关注第一个输入元素...在可能的情况下,第一个输入元素的id为#photo_name.

所以我试过了

   $(".modal-link").click(function(event){
     $("#modal-content").modal('show');
     $("input#photo_name").focus();
   });

但这无济于事.最后,我尝试绑定到'show'事件,但即便如此,输入也不会集中.最后只是为了测试,因为我怀疑这是关于js加载顺序,我放入一个setTimeout只是为了看看我是否延迟了一秒,焦点是否有效,是的,它有效!但这种方法显然是废话.有没有办法在不使用setTimeout的情况下获得与下面相同的效果？

  $("#modal-content").on('show', function(event){
    window.setTimeout(function(){
      $(event.currentTarget).find('input#photo_name').first().focus()
    }, 0500);
  });

在Twitter bootstrap中,查看模态文档.我无法弄清楚是否有办法收听模态的关闭事件并执行一个函数.

例如,我们以此模态为例:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

顶部的X按钮和底部的关闭按钮都可以隐藏/关闭模态data-dismiss="modal".所以我想知道,如果我能以某种方式听那个？

或者我可以像这样手动做,我猜...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

你怎么看？

我正在写一个模态弹出窗口,当按下打开模态按钮时我需要浏览器跳到屏幕顶部.有没有办法使用jQuery将浏览器滚动到顶部？

我需要叠加显示在第一个模态上方,而不是在后面.

$('#openBtn').click(function(){
	$('#myModal').modal({show:true})
});

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          <br>
          <br>
          <br>
          <br>
          <br>
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" …

我曾经使用过JQuery UI的对话框,它有一个open选项,你可以指定一些Javascript代码在打开对话框后执行.我会使用该选项使用我的函数选择对话框中的文本.

现在我想用bootstrap的模态做到这一点.以下是HTMl代码:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

至于打开模态的按钮:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

我尝试使用按钮的onclick监听器,但是在模式出现之前显示了警告消息:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

我正在开发纯粹在JavaScript中的OAuth身份验证流程,我想在弹出窗口中向用户显示"授予访问权限"窗口,但它会被阻止.

如何防止由不同浏览器的弹出窗口阻止程序阻止弹出窗口window.open或被window.showModalDialog其阻止？

我尝试使用JQuery UI Dialog来替换丑陋的javascript:alert()盒子.在我的场景中,我有一个项目列表,并且在每个项目的旁边,我会为每个项目都有一个"删除"按钮.psuedo html设置将是以下内容:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

在JQ部分,在文档准备好的时候,我首先将div设置为带有必要按钮的模态对话框,然后将那些"a"设置为在删除前触发确认,如:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

好的,这是问题所在.在初始化时,对话框将不知道谁(项目)将启动它,以及项目ID(!).如何设置这些确认按钮的行为,如果用户仍然选择YES,它将按照链接删除它？