标签: modal-dialog

我有这行 PHP：

$STRING .= $b_f.'<a href="'.get_home_url().'/wp-login.php" class="ua5 '.$linkclass.'">'.$CORE->_e(array('head','5','flag_link')).'</a>'.$b_a;

这个网址现在作为一个新网页打开。如何将其作为对话框/模式窗口打开？在我的代码中，我安装了引导程序。

当人们点击叠加层时，我想关闭我的模式，通常你会使用

jQuery('.ui-widget-overlay').bind('click', function() {
            jQuery('#dialog').dialog('close');
        })

但是我在创建它之后加载了我的模态，所以上面的代码似乎以某种方式干扰了我的。到目前为止，这是我的代码。

jQuery('.ui-widget-overlay').bind('click', function() {
            jQuery('#dialog').dialog('close');
        })

var dialog = $(".dialog").dialog({
        autoOpen: false,
        closeText: "",
        width: 'auto',
        modal: true,
        position: { my: "center top", at: "center top+30", of: "body" },
        show: {
            effect: 'fade',
            duration: 250,

        },
        hide: {
            effect: 'fade',
            duration: 250
        },
        
    });

    $(".currentDay").click(function () {
        var id = event.target.id;
        var url = '/Home/CalenderPartial/' + id;

        dialog.load(url, function () {
            dialog.dialog("open");

        });

    });

我在模态中使用谷歌自动完成。当我单击输入字段时，它会在模态后面显示结果。我没有使用任何 css。它在模态之外完美地工作。但它在模态内不能正常工作。请帮我。

HTML代码

<div class="form-group">
    <p class="control-label1">City</p>
    <input type="text" id="locationTextField" placeholder="" name="city" class="form-control">
</div>

Javascript代码

//Google Map
function initialize() {
    var input = document.getElementById('locationTextField');
    var autocomplete = new google.maps.places.Autocomplete(input);
}

function validateCity() {
    searchfield = $('#locationTextField').val();
    if (searchfield == "" || searchfield == null) {
        return false;
    }
    else {
        $('#locationTextField').val('');
        return false;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

我在让 TinyMCE 在语义 UI 模式中工作时遇到问题。一切看起来都很好并且没有错误，但无法将光标放在 TinyMCE 编辑器中。

我找到了这些解决方案，但似乎没有一个适用于语义 UI： http://archive.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_boostrap_dialog http://archive.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_jQuery_UI_dialog

我正在使用 Aurelia 和 TypeScript。

关于如何解决这个问题有什么想法吗？

我正在为我的应用程序创建一个通用的模态 React 组件来显示各种不同的东西。我希望它足够灵活以显示纯 HTML 和交互式 React 组件。

我已经通过将可显示组件存储在我的 Redux 模态减速器中来使其工作。到目前为止，我还没有遇到任何问题。

以前有没有人采用过这种方法？我无法在网上找到任何示例，所以我不确定这是否是不好的做法。如果是这样，您是否建议使用另一种方法来处理？

我有一个模态的完整代码：
https : //codesandbox.io/s/8yxmz73l1j
我希望能够为这个模态设置类似于引导程序的动画，上下平移和淡入淡出。因此，当我单击delete按钮时，它会在模态中淡出，而当我单击关闭模态的按钮时，它会淡出。我尝试使用 React Transition 但无济于事。我怎样才能达到我想要的？

我正在尝试从父组件打开模型。所以，我从父组件打开了虚拟对话框，从以下方面获得帮助：如何将数据传递给 Angular ng-bootstrap modal for binding。在 Dialog 而不是虚拟文本上，我有输入框来显示来自父组件的信息，同时用户可以编辑此信息并要求此更改发送回父信息。我尝试使用令牌注入来执行类似 Angular Material MAT_DIALOG 的操作，但我并没有完全遵循它。

 import { Component, OnInit, InjectionToken, Injector, OnDestroy, 
  TemplateRef, Inject } from '@angular/core';
  import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

         export interface CancelDialogData {
            name: string; // this can be any string;
            Comments: string;
         }
        export declare const CUSTOM_DIALOG_DATA: InjectionToken<any>;

          @Component({
           selector: 'app-reject-dialog',
        templateUrl: './reject-dialog.component.html',
           styleUrls: ['./reject-dialog.component.css']
           })
           export class MyDialogComponent implements OnInit {

         constructor(public activeModal: NgbActiveModal,  
       @Inject(CUSTOM_DIALOG_DATA) public data: CancelDialogData) { }

          ngOnInit() {
                 }

              onCancelClick(): void {
                this.activeModal.close(); …

我在 stackoverflow 中看到了很多基于模态的问题，因此它可能看起来与其他 stackover-flow 问题类似，但我正在寻找的设计没有在任何地方找到。这就是我问这个问题的原因。我在设计方面确实是个新手。我喜欢当用户点击图像时 Instagram 模态卡弹出。我认为他们已经使用transform:scale()并且我尝试实现该逻辑，但似乎它不起作用。我希望卡片scale从 1.2 增长到 1。我已经在代码片段中分享了我的代码。如果有人告诉我如何像 Instagram 那样弹出模态卡，我会非常高兴。

const modal = document.getElementById("modal-container");
  const btn = document.getElementById("open-modal-button");
  const span = document.getElementsByClassName("close")[0];

  btn.onclick = function () {
    modal.classList.add("visible");
  };

  span.onclick = function () {
    modal.classList.remove("visible");
  };

  document.body.addEventListener("click", function (event) {
    if (event.target === modal) {
      modal.classList.remove("visible");
    }
  });

.modal {
    position: fixed;
    z-index: 10;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: …

我是 Razor 页面的新手，所以请耐心等待。我的页面上有一个表格，填充如下：

单击最后一列将打开一个模式弹出窗口：

其中有一个用于删除所选行的按钮。然而，我似乎无法弄清楚如何将所选行的 ID 从表传递到DeleteSeasonTrip()javascript 函数，在该函数中我发布 Ajax 调用来删除所选行。

我认为我也许能够在行单击上填充隐藏字段并从那里获取它，但想知道是否有更好的解决方案。

当使用以下代码单击图像时，我尝试打开模式：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是Bootstrap Modal Doc中的原始代码， 但它还可以工作，我单击按钮，但没有任何反应