标签: modal-dialog

我已经从parentWindow（非模式）打开了childwindow - 实现“等待”以便parentWindow知道childWindow何时关闭的最佳方法是什么？由于几个原因，我无法使用 showDialog()。我尝试了 while 循环（测试 childWindow 的可见性属性），但它只是中断（没有例外 - 但只是不打开 childWindow）。是多线程的情况吗？

我是 jQuery 和 java 的新手，我真的很想集中精力创建对话框的多个实例。我在头部使用这个：

 <script src="external/jquery/jquery.js"></script>
 <script src="jquery-ui.js"></script>

如果我只有 1 个按钮和一个对话框，它就可以工作。但是当我添加另一个时它就停止工作了。我相信这很容易解决，我只是在挣扎。

        <h2>subjects</h2>

        <button id="opener">maths</button>

        <div id="dialog" title="Dialog Title">maths is an important subject.</div> <br> 

      <button id="opener">english</button>

        <div id="dialog" title="Dialog Title">this is also very important</div> <br>

       <script>

        $( "#dialog" ).dialog({ autoOpen: false });
        $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
                                         });
        </script>

在此页面的右下角，有一个 YouTube 播放按钮，单击该按钮将打开一个模式窗口，但模式窗口出现在浏览器窗口的顶部，因此用户必须向上滚动。

<img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/video-play.png" width="" height="" alt="play video" class="aligncenter" id="toggle">

jQuery(document).ready(function() {
    jQuery('#toggle').click(function(){
        jQuery('#video').appendTo('body');
        jQuery('#video').addClass('active');
        jQuery(window).scrollTo(jQuery('#top').scrollTo());
    });
    jQuery('#close').click(function(){
        jQuery('#video').removeClass('active');
    });              
});

<div class="mfp-container active" id="video">
    <div class="mfp-content">
         <p align="right"><img src="http://gm.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close"></p>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/ut6UYwbt6Xk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>            
     </div>
</div>

<style>
.mfp-container {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    display: none;
    z-index: 999999999; …

我的modalDialog 的标题是一个reactiveValue。一旦在模态中更改了某个输入，我希望标题也更改。我尝试了几种不同的方法，但无法让它无缝地工作。标头要么不更新，要么仅在我关闭/重新打开模态时更新，要么在标头立即更新时导致模态完全重新呈现。

目前，我被困在最后一个（完全重新渲染模式）。但是，当我创建最小的、可重现的示例（如下）时，标题仅在我关闭并重新打开模态时更新。

ui<-fluidPage(
  actionButton(inputId="model", label="Edit Model")
)

server<-function(input, output, session) {
  rv<-reactiveValues(header="Standard Model")

  observeEvent(input$model, {
    showModal(
      modalDialog(
        fluidPage(
          fluidRow(h3(rv$header)),
          sliderInput(inputId="factor_1", "Factor #1", value=70, min=0, max=100),
          sliderInput(inputId="factor_2", "Factor #2", value=30, min=0, max=100)
        ),
        footer=modalButton("Save Weights"), size="s", easyClose=TRUE
      )
    )
  })

  observe({if (!is.null(input$factor_1)) {
    if (input$factor_1!=70) {
      rv$header<-"Custom Model"
      }
    }
  })
}

shinyApp(ui=ui, server=server)

本质上，一旦因子 #1 的输入第一次更改，我希望标题从“标准模型”更改为“自定义模型”（无需关闭/重新打开或重新呈现模式）。

我是编码初学者。我正在创建我的平面设计师作品集。我已将所有投资组合内容（缩略图、客户名称、描述...）放入 JSON 文件中名为“投资组合”的数组中。数组中的每一项都是不同的项目。我显示了一个缩略图库，当我点击一个缩略图时，一个带有项目详细信息的模式会打开。

我在我的“投资组合”数组上映射以显示画廊，这是有效的。但是当我打开模态时，它总是显示我数组的最后一项。

import React from 'react';
import Modal from 'react-bootstrap/Modal';

class Portfolio extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      projectName: "",
      show: false
    };

    this.handleShow = () => {
      this.setState({ show: true });
    };

    this.handleClose = () => {
      this.setState({ show: false });
    };
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1cbaj5")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.portfolio
          });
        },
        (error) => {
          this.setState({
            isLoaded: true, …

我正在尝试使用 React.JS 和 Reactstrap 制作 Gallery 应用程序。我正在使用该map()功能来显示卡片中的每一件艺术品。在每张卡片中，都有一个按钮可以打开一个模式以显示来自地图功能的更多数据。我的问题是当我单击按钮从任何卡片打开模式时，它会显示页面上最后一张卡片的数据。

编码：

const Artcards = ({ state, loading }, props) => {
  const { buttonLabel, className } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);



  if (loading) {
    return <h2>Loading</h2>;
  }

  return (
    <CardGroup className="CardGroup">
      {state.map((state, index) => {
        return (
          <div key={index}>
            <Card className="Card" style={{ padding: "0", height: "39rem" }}>
              <CardBody className="pt-3">
                <CardTitle className="CardTitle">
                  Art Name:
                  <h6 className="CardParagraph">{state.artName}</h6>
                </CardTitle>
                <CardSubtitle>
                  Artist Name:
                  <h6 className="CardParagraph">{state.artistName}</h6>
                </CardSubtitle>
                <CardImg …

我正在使用 laravel 6.0 并且我收到这个奇怪的错误“调用成员函数 addEagerConstraints() on null”我拥有的是通知表，其中我有 notification_id 并且这个 notification_id 链接到 notification_message 表，我正在尝试创建一个他们之间的关系我尝试了一切，但我收到了这个奇怪的错误。

这是我的通知模型，我在其中定义了这种关系

public function notificationMessage(){
    $this->hasOne('App\Models\NotificationMessage','id');
}

我正在研究 Vuetify.js，我是 Vue 的新手，我参考了这个文档Vuetify Dialogs for create dialog and solution of Matheus Dal'Pizzol 从此链接Open a Vuetify dialog from a component template in VueJS 将其分离到组件. 结果我有子组件作为对话框如下

家长

    <template>
      <v-container fluid>
        <v-row dense>
          <v-col cols="12">
            <v-btn large color="success">Add product</v-btn>
          </v-col>
          <v-col cols="3" v-for="product in products" :key="product.id">
            <v-card class="mx-auto" outlined>
              <v-list-item three-line>
                <v-list-item-content>
                  <v-list-item-title class="headline mb-1">{{product.name}}</v-list-item-title>
                  <v-list-item-subtitle>{{product.title}}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-card-actions>
                <v-btn dark color="cyan" @click.stop="showScheduleForm = true">
                  <v-icon dark>mdi-television</v-icon>
                </v-btn>
                <v-btn color="primary">Detail</v-btn>
              </v-card-actions>
            </v-card>
            <modal-detail v-model="showScheduleForm" :productDetailInfo="product"></modal-detail>
          </v-col>
        </v-row>
      </v-container>
    </template>

    <script> …

我尝试改进我的 wagtail-admin，现在我堆叠，因为无法打开模态窗口。是的，当然，我可以创建一个div带有关闭按钮的按钮，但这不是正确的方法。正如我所知道的，有一个特殊的函数（或对象）负责打开这样一个窗口。

wagtail-admin的js对象的这种结构没有参考。可能有人知道，怎么做？或者也许我应该忘记它并仅通过vanilla javascript制作我的模态窗口？

我对 React 中的模态概念有疑问。当使用带有 jQ​​uery 的服务器端渲染模板时，我习惯于有一个始终可用的空全局模态模板（包含在始终扩展的基本模板中）。然后在进行 AJAX 调用时，我只是填充了模态……像这样：

$('.modal-global-content').html(content);
$('.modal-global').show();

那么我如何在 React 中实现这个概念呢？