标签: modal-dialog

我正在使用Twitter Bootstrap模式,使用默认选项,您可以单击背景或按[Esc]关闭模式.

但是,当我在模态中启动ajax操作时,我想禁用模式以任何方式关闭.所以我禁用按钮并隐藏模态的关闭按钮,但我无法弄清楚如何禁用背景和[Esc]键.

我试过了:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
});

但这似乎并没有在飞行中起作用.

一旦ajax操作完成,我还需要重新启用背景和键盘.

我正在使用角度材料-2的对话框.

问题是:在iPhone或平板电脑中打开模态对话框时,我无法禁用自动对焦.在iOS中,它会自动将第一个输入字段聚焦在对话框中!

我尝试使用tab索引,并在其他输入字段中使用自动焦点,但它不起作用

我正在使用Angular 2作为我的代码,在我的对话框中我正在使用表单控件.我试过用markasuntouched afterviewInit,但我还是有同样的问题!!

我正在寻找一个模式对话框(使用UI对话框)和独特的CSS,它与传统的对话框是分开的,所以本质上要有两个jQuery对话框,每个对话框看起来都不同.

例如,我设计了一个

<div id="dialog_style1" class="dialog1 hidden">One content</div>

和另一个

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

不幸的是,我注意到使用单独的CSS来设置对话框的部分样式,例如

.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }

不起作用,因为.ui-dialog-titlebar没有类.dialog1,我不能做一个addClass没有闯入插件.

另一种方法是让一个元素body具有唯一的类/ id(取决于我想要的那个),但是这将排除在同一页面中同时具有两个对话框.

我怎样才能做到这一点？

有人在四月份提出完全相同的问题,没有任何答案.但由于他提供的信息太少; 这个问题被抛弃了.

我也有同样的问题.在一个main_page.html我有这样一行:

<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>

一旦你点击那里,编辑模板将出现在twitter bootstrap模式中.

url.py

(r'^contact/edit/(?P<contact_id>\d+)/$', contact_view),

view.py

def contact_view(request, contact_id=None):
    profile = request.user.get_profile()
    if contact_id is None:
        contact = Contact(company=profile.company)
        template_title = _(u'Add Contact')
    else:
        contact = get_object_or_404(profile.company.contact_set.all(), pk=contact_id)
        template_title = _(u'Edit Contact')
    if request.POST:
        if request.POST.get('cancel', None):
            return HttpResponseRedirect('/')
        form = ContactsForm(profile.company, request.POST, instance=contact)
        if form.is_valid():
            contact = form.save()
            return HttpResponseRedirect('/')
    else:
        form = ContactsForm(instance=contact, company=profile.company)
    variables = RequestContext(request, {'form':form, 'template_title': template_title})
    return render_to_response("contact.html", variables)

这通常是contact.html的样子: …

我正在使用Bootstrap Modal.我宣布它,我称之为,我展示它......一切似乎都没问题.

但是,如果我之前已经将"键盘"属性显示为已经存在的模态为假,我想在移动中更改它？我的意思是:

首先,我创建一个模态执行此操作(如您所见,我将模态put键盘属性声明为false):

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false
});

但后来我声明了这个事件处理程序,这意味着如果发生"某事",我希望将keyboard属性设置为true.

 $('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

所以,当我走的时候

$("#myModal").show();

事件处理程序没有按预期执行,因为一旦按下Escape键,我就无法关闭模式.但我完全确定"某事"是真的,我已经检查并重新检查了$('#myModal').modal({keyboard: true})执行情况.

任何线索,为什么这不更新配置选项的值？

在zurb foundation的网站http://foundation.zurb.com/docs/reveal.php上,他们列出了一些选项,包括

open:在模态打开之前"触发"的回调函数.

打开:在打开模态后触发'的回调函数.

close:在模态准备关闭之前"触发"的回调函数.

closed:关闭模态后触发''的回调函数.

但我不知道如何将它们与我的模态一起使用.我试过了

$('#myModal').closed(function() {});

$('#myModal').trigger('reveal:closed')( {});

$('#myModal').reveal.closed(function() {});

$('#myModal').reveal().closed(function() {});

我用谷歌搜索,但没有发现.谁可以解释它或给我一个例子或提供相关链接？

谢谢!有用!

我还有另一个与揭密()相关的密切相关的问题

<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>);

我试图添加一个像data-closeOnBackgroundClick="false"似乎无法工作的属性.什么应该是正确的语法？它也适用于回调函数吗？

我必须支持IE8.模态本身工作正常,但我尝试调整它(在Firefox中工作正常)在IE8中不起作用.

我只是在模态对话框div(Bootstrap结构中的第二个嵌套的一个)中添加一个类(在这个例子中为宽模态)并通过CSS应用宽度,没什么特别的.

HTML:

       <div class="modal fade" id="modalTest" role="dialog">
            <div class="modal-dialog wide-modal">
              <div class="modal-content ">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title">Testing Modal</h4>
                </div>
                <div class="modal-body">
                  <img src="content/Example-Infographic.jpg" width="100%" />
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

CSS:

.wide-modal {
    width: 60%;
}

我尝试将上面和下面的div添加到没有(正面)效果.它就像在Firefox中的魅力一样,在IE8中根本没有效果.我也试过px宽度,没有区别.我确实有respond.js库,所以一般来说IE8的行为不是这个.

我是Modals的新手,我有一个表格,当用户点击提交时,它会显示一个模态确认用户是否想要提交,该模式还包含来自表单字段的用户输入.我搜索了整个互联网,但找不到合适的我的需求.我只看到他们将click事件标记为在链接上打开模态.我有一个输入类型提交.你能举出例子或想法吗？谢谢!这是我的样本表格.

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>

我已经从twitter bootstrap中复制并粘贴了示例代码,以在我的Rails 3.2应用程序中创建一个基本的模态窗口:

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

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

它不起作用.这不是因为jQuery或脚本没有加载,因为a)它不需要加载任何js,因为它使用数据定位和b)我已经检查了控制台,一切都完美无缺.

这也不是因为我包括了boostrap.js和bootstrap-modal.js ......我已经检查过了,我不是.

我不知所措.它应该工作.其他bootstrap js在网站上运行正常.

我唯一能想到的是它与类的定义有关.hide和.fade - 当我把它们拿出来时,模态显示得很好.当我包含它们时,它根本不会显示出来.

jQuery UI会干扰它吗？

请向我询问您可能需要的任何进一步信息,以帮助我......

更新:

所以我认为我看到了问题,但我不知道如何解决它.当我检查控制台时,在顶部我看到了

element.style {
display: none;
}

不知何故现在是div的一部分,所以在控制台中它看起来像这样:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" …

我试图在浏览器的中心显示一个Kendo UI模式窗口,但它一直显示在页面的底部,我的意思是窗口中唯一可见的部分是顶部栏,其余部分是窗口是不可见的,只有当你拖动它时,你可以正确地查看它.我没有应用于用于窗口的div的样式,所以我很困惑为什么它被显示为那样.

另外我想要禁用窗口顶部栏上的所有操作按钮,尝试设置一个空的动作数组但是关闭按钮显示为默认,有没有办法只显示窗口的标题在顶部酒吧？我希望单击其中的按钮时窗口消失.

这就是我创建窗口的方式:

var accessWindow = $("#accessDiv").kendoWindow({
    actions: [],
    draggable: true,
    height: "300px",
    modal: true,
    resizable: false,
    title: "Access",
    width: "500px"
});

accessWindow.center();
accessWindow.open();

这是我的div只有一个标签,一个输入和一个按钮,目前没有CSS应用于它:

<div id="accessDiv" style=" width: 100%; height: 100%; background-color: #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>