[英]Modal Window: How can I set a different content for each modal?
I'm working on my own custom modal window, but I've a problem.我正在处理我自己的自定义模式窗口,但我遇到了问题。 I'd like to create multiple modal window, but I need to apply a different content for each.
我想创建多个模态窗口,但我需要为每个窗口应用不同的内容。
My HTML code:我的 HTML 代码:
<div id="footer">
<div class="wrapper">
<ul>
<li>
<a class="modal-window-trigger" id="help" href="help.php">Help</a>
</li>
<li>
<a class="modal-window-trigger" id="faq" href="faq.php">Frequently Asked Questions</a>
</li>
</ul>
<span id="footer-copyright">
<a href="./..">Coded by Dylan - ©2015-2016</a>
</span>
</div>
</div>
<div class="modal-window">
<div class="modal-window-container">
<span class="modal-window-closer" title="Close the overlay"></span>
<h1 class="big-title" style="margin-bottom: 15px;">First Modal Window</h1>
<p>First Modal Window Text</p>
</div>
</div>
<div class="modal-window">
<div class="modal-window-container">
<span class="modal-window-closer" title="Close the overlay"></span>
<h1 class="big-title" style="margin-bottom: 15px;">Second Modal Window</h1>
<p>Second Modal Window Text</p>
</div>
</div>
<div id="expose-mask"></div>
My JavaScript code:我的 JavaScript 代码:
(function($)
{
$(".modal-window-trigger").click(function(e)
{
e.preventDefault();
$(".modal-window").addClass("shown");
$("#expose-mask").css({"visibility": "visible"});
});
$(".modal-window-closer, #expose-mask").click(function(){
$("#expose-mask").css({"visibility": "hidden"});
$(".modal-window").removeClass("shown");
});
})(jQuery);
Result: http://prntscr.com/7gd7g6结果: http : //prntscr.com/7gd7g6
I'd like to show the specific content when I click on the "Help" text and another content when I click on the "Frequently Asked Questions" text.我想在单击“帮助”文本时显示特定内容,并在单击“常见问题”文本时显示其他内容。
How can I set an unique data for each modal?如何为每个模态设置唯一数据?
(function($)
{
$(".modal-window-trigger").click(function(e)
{
e.preventDefault();
var attrid = $(this).attr('id');
if(attrid=='help'){
$(".modal-window1").addClass("shown");
$("#expose-mask").css({"visibility": "visible"});
return;
}else if(attrid=='faq'){
$(".modal-window2").addClass("shown");
$("#expose-mask").css({"visibility": "visible"});
return;
}
});
$(".modal-window-closer, #expose-mask").click(function(){
$("#expose-mask").css({"visibility": "hidden"});
$(".modal-window").removeClass("shown");
});
})(jQuery);
change the class modal-window to modal-window1 for first window and modal-window to modal-window2 for second window将类 modal-window 更改为 modal-window1 用于第一个窗口,将 modal-window 更改为 modal-window2 用于第二个窗口
(function($)
{
$(".modal-window-trigger").click(function(e)
{
e.preventDefault();
var modal_id = $(this).attr('name');
show_modal(modal_id)
});
$(".modal-window-closer, #expose-mask").click(function(){
$("#expose-mask").css({"visibility": "hidden"});
$(".modal-window").removeClass("shown");
});
})(jQuery);
function show_modal(modal_id){
$('#'+modal_id).addClass("shown");
$("#expose-mask").css({"visibility": "visible"});
}
add name attribute for <a class="modal-window-trigger" name="model1">
and change id the modal-window to model1 respectivily.为
<a class="modal-window-trigger" name="model1">
添加 name 属性,并将 modal-window 的 id 分别更改为 model1。
I just ran into the same question while creating a web app with React.我在使用 React 创建 Web 应用程序时遇到了同样的问题。 First, I created a react component call GeneralModal.
首先,我创建了一个名为 GeneralModal 的 React 组件。 In the first div tag I assigned id={props.id} so that every time I want to pass in new content into the modal framework, I create a new id for the modal without having to duplicate the code.
在第一个 div 标签中,我分配了 id={props.id} 以便每次我想将新内容传递到模态框架中时,我都会为模态创建一个新的 id,而不必复制代码。 Like this:
像这样:
<div class="modal fade" id={props.id} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Then, at where I want to pass in new content (modal's body), I used然后,在我想传入新内容(模态的正文)的地方,我使用了
<div class="modal-body">
{props.children}
</div>
In the component I want to call the modal, I write:在我想调用模态的组件中,我写道:
<BackdropModal children={<About/>} id={"about"} next={false} title={"About Peacock"}/>
Here I am assigning an id to the general modal with content so that this id is uniquely associated with the specific content在这里,我将一个 id 分配给带有内容的通用模态,以便此 id 与特定内容唯一关联
Then, I use this button to call modal with this specific content:然后,我使用此按钮调用具有此特定内容的模态:
<a class="nav-link" data-toggle="modal" data-target="#about" href="#about">About</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.