对于我从 AngularJS 重写的应用程序，我有一系列操作：
1) I got to the server to get a message
2) I display the returned message in a generic dialog, with a Yes and No button.
3-Yes) I go to the server to do something, proceed to 4
3-No) I terminate the sequence
4) Notfiy the user that the operation is complete.
然而，我在将其转换为 Angular/ReactObservable系统时遇到问题。我想做这样的事情：
// Actual arguments are immaterial in this case...
this.webDataService.get('/api/GetEndUserMessage', args)
.pipe(
map((message: string) => {
const config = new MatDialogConfig();
config.data …我有一个用于记录的模式窗口。当我按下提交时，我正在记录，但手动重新加载页面后我可以看到结果
我打开函数 after_sign_in_path_for(resource) 并添加行redirect_to root_path 并返回 true
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
before_action :configure_devise_permitted_parameters, if:
:devise_controller?
before_action :set_referral_cookie
before_action :blog_redirect
force_ssl unless: :ssl_configured?
# skip_before_action :verify_authenticity_token
before_action :redirect_logins
def redirect_logins
if request.fullpath.match('users/sign_in') && request.get?
redirect_to '/?sign_in=true'
end
end
def after_sign_in_path_for(resource)
redirect_to root_path
'/'
end
def ssl_configured?
puts request.original_url
Rails.env.development? || !!request.original_url.match('/blog')
end
def blog
redirect_to "https://www.xxx.xx/blog#{request.fullpath.gsub('/blog','')}", :status => :moved_permanently
end …我正在使用react-responsive-modal来实现我的模式。我面临的一个问题是，当我单击屏幕上模态 div 之外的任意位置时，我的模态将关闭。我希望仅当我单击取消或关闭按钮时才关闭我的模式。我找到了 onOverlayClick 函数道具，并用它来应用 PreventDefault 但它没有用。
任何人都可以建议一种实现此功能的方法。提前致谢。
class CustomModal extends Component{
constructor(props) {
super(props);
}
onOverlay = (e) =>{
e.preventDefault();
}
render(){
const { props } = this;
return(
<Modal open={props.open} onClose={props.onCloseModal}
onOverlayClick={e =>this.onOverlay(e)} center>
<div className="on-setting-modal">
<h6>"are you sure ?"</h6>
<div className="on-setting-modal-buttons">
{
!!props.showCancel &&
<button onClick={props.onCloseModal} >Cancel</button>
}
<button onClick={props.onOkModal} >OK</button>
</div>
</div>
</Modal>
)
}
}
export default CustomModal
我已经使用 MVVM 在 WPF 中实现了新功能IDialogService。我的对话框工作正常，但当我在前台打开另一个窗口时，该对话框将出现在该窗口的中心。
我想要实现的是，对话框始终位于主窗口的中心。这可以通过将（其类型和我创建的对话框Owner的）属性设置为 来应用。DialogWindowWindowParentUserControlApplication.Current.MainWindow
我现在发现，可以更改 的样式，DialogWindow如下所示。但我认为没有任何可能以Owner这种方式改变财产。
Owner我已经尝试通过访问CodeBehindParent中的来设置属性UserControl。但它要么为 null ( OnInitialized)，要么无法更改，因为“DialogWindow已显示”( OnLoaded/ OnApplyTemplate)。
您对如何解决这个问题有什么建议吗？
因此，此弹出窗口打开，我可以在 textArea 中写入任何数据，但不幸的是，单击“提交”按钮弹出窗口未关闭，我没有在 ts 文件中获取值。如果我在弹出框之外单击，我会在 TS 中得到未定义的值。
我需要解决这个问题。1. 为什么TextArea数据没有转入TS文件？2. 在文本区域和单击按钮中写入任何数据后，弹出窗口必须关闭，以防止用户单击屏幕的其他部分。
我的 ts 代码是：
if(cnfrm){
let dialogRef = this.dialog.open(this.callAPIDialog)
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`); // which will be value
})
}
我的html代码是：
<ng-template #callAPIDialog>
<textarea #name matInput placeholder="Leave a comment" formControlName="description" required></textarea>
<button type="button" (click)="dialogRef.close(name.value)">Submit</button>
</ng-template>
我正在尝试创建一个模式，使用户能够输入日期以供进一步使用。该日期不能是过去或现在的日期（只能是未来的日期）。Slack表示可以在这里验证输入数据并在模态视图中显示错误，但我并不真正理解这种方法（我是一个自学者和新手）。
这是我的view对象view.open：
{
type: "modal",
callback_id: "tests",
title: {
type: "plain_text",
text: "Tests",
emoji: true
},
submit: {
type: "plain_text",
text: "Send",
emoji: true
},
close: {
type: "plain_text",
text: "Cancel",
emoji: true
},
blocks: [
{
type: "input",
block_id: "datepicker",
optional: false,
element: {
action_id: "calendar",
type: "datepicker",
initial_date: "2020-09-05",
placeholder: {
type: "plain_text",
text: "Select a date",
emoji: true
}
},
label: {
type: "plain_text",
text: "Label",
emoji: true
}
}
] …我正在尝试在 Angular 中打印 ng-bootstrap 模态的模态内容。该模式包含一个表格，因此我希望以相同的格式打印文档。我想要这里给出的相同功能，但无法实现它。
根据此链接，它设置打印期间的可见性body并hidden仅显示模态内容。但在 Angular 中，我们使用组件，因此设置body: hidden不起作用。它打印出整个文档（模态以及我不想要的背景组件、页眉和页脚）。
我已经遵循了很多解决方案，但无法这样做。
我还尝试将可打印的模式内容附加到新窗口，但写入新窗口只需要字符串。我在模态中使用表格，因此我希望打印相同样式的表格。
我怎样才能实现这个目标？
编辑1：这是我要打印的模态内容：
<div id="printable">
<div class="row shipping">
<div class="col-4">
<h6>SHIPPING ADDRESS</h6>
<p>
{{ this.order.shipName }} : {{ this.order.addrLine1 }},
{{ this.order.area1 }}, {{ this.order.area2 }},
{{ this.order.countryCode }} - {{ this.order.pin }}
</p>
</div>
<div class="col-4">
<h6>SHIPPING METHOD</h6>
<p>Standard</p>
</div>
<div class="col-4">
<h6>ACCOUNT PAID</h6>
<p>Paypal Account: {{ this.order.order.payerEmail }}</p>
</div>
</div>
<br /><br />
<div class="card">
<table>
<tr>
<th>ITEM</th>
<th>DETAILS</th>
<th>QTY</th> …我试图在模式关闭时重置我的表单数据。我认为我的部分问题是表单数据<Mint>位于另一个组件中。
老实说，每当显示或隐藏模式时我都想重置数据。因此，如果有一种方法可以重置toggleModalOne()函数内的表单数据，那就太棒了，但我不知道如何做。
任何意见是极大的赞赏。
// BuyIt.jsx
import React, { useState } from "react";
import TextLoop from "react-text-loop";
import Modal from "react-modal";
import Mint from "../../components/slider/mint.js";
const BuyIt = () => {
const [isOpen, setIsOpen] = useState(false);
function toggleModalOne() {
setIsOpen(!isOpen);
}
return (
<div className="div-buyNowBtn">
<button id="buyNowBtn" className="white-fill-bg btn-outline btn-lg" onClick={toggleModalOne}>
Buy Now
</button>
</div>
<Modal
isOpen={isOpen}
onRequestClose={toggleModalOne}
contentLabel="My dialog"
className="custom-modal"
overlayClassName="custom-overlay"
closeTimeoutMS={500}
>
<Mint/>
</Modal>
);
}
在运行下面的 MWE 代码时，如底部图像所示，用户输入到模态对话框中呈现的矩阵中会导致矩阵压缩。用户输入到矩阵中的列越多，矩阵压缩得越多，直到留下一个难以阅读的矩阵。
有没有办法在添加列时不允许矩阵压缩，而是向右扩展，用户使用滚动条向左/向右导航？今天早上我一直在尝试插入滚动条，但还没有成功。
也许挑战在于shinyMatrix包装本身。我想知道是否可以使用 DT Table，因为它呈现得很好（带有滚动），并shinyMatrix作为输入/输出的后端引擎？Packagerhandsontable虽然很漂亮，但在模式对话框中效果不佳。
MWE代码：
library(shiny)
library(shinyMatrix)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
uiOutput("panel"),
actionButton("show2nd","Show 2nd input (in modal)")
),
mainPanel(plotOutput("plot1"))
)
)
server <- function(input, output, session){
output$panel <- renderUI({
tagList(
matrixInput("input1",
value = matrix(c(10,5), 1, 2, dimnames = list(c("1st input"),c("X|Y",""))),
rows = list(extend = FALSE, names = TRUE),
cols = list(extend = FALSE,
delta = 1,
delete = FALSE,
names = TRUE,
editableNames = FALSE,
multiheader=TRUE),
class = "numeric"),
helpText("Generate …我在我的应用程序中使用 Ionic 框架 6 和 Angular 13。我想调整其中离子模态的大小。我试图在创作的同时通过全球课程。它不起作用。我尝试调整包装类的大小。它在 Ionic -5 的早期版本中工作。但不在这里。请帮忙。提前致谢。
公共服务.ts
async createPopup(options) {
options.componentProps.service = this;
const ref = await this.modalController.create({
component: AppModalPopupComponent,
...options
});
if (!this.modalPopup?.length) { this.modalPopup = []; }
this.modalPopup.push(ref);
ref.present();
return ref;
}
component.ts
this.modalService.createPopup(
{
backdropDismiss: true,
componentProps: {
header: 'Update Banner in My Queue',
component: AppUpdateImagePopoverComponent
},
cssClass: "image-popup-modal-css"
});```
Global.scss
.image-popup-modal-css {
height: 100%;
width: 100%;
color: var(--app-secondary-color);
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.image-popup-modal-css .modal-wrapper {
display: grid;
grid-template-columns: …