jQuery简单的多个模态在一个html页面 [英] jQuery simple multiple modals on one html page

问题描述

我尝试了Eric martin模态插件的简单模态。
我有点困难。我在Html页面上做了一个模态，但是如果我想在一个HTML页面中多一些模态，就像我做的第一个 - 只是不同的背景和内容？

HTML：

 < div id ='content'> 
 
< div id ='basic-modal'> 
 
 
 
< a href ='＃'class ='basic'>白色whine< / a> 
 
 
< div id =basic-modal-content> 
 
< p>文字文字文字< / p> 
< / div> 
< / div> 
< / div> 
  

jQuery：

 code> jQuery（function（$）{
 //在页面加载对话框
 // $（'＃basic-modal-content'）modal（）; 
 
 //加载对话框点击
 $（'＃basic-modal .basic'）click（function（e）{
 $（'＃basic-modal-content'）。modal ）; 
 
 
 return false; 
}）; 
}）; 
  

解决方案

他们同时。因为插件使用 id 作为它的容器和插件中的一些元素。在页面中拥有相同的ID会在代码中产生问题。

这里是演示： http://jsfiddle.net/lotusgodkk/GCu2D/226/

HTML：

 < div id ='basic-modal'> 
< input type ='button'name ='basic'value ='Demo'class ='basic'/> 
< div id =basic-modal-content1>对话框1< / div> 
< input type ='button'name ='basic'value ='Demo'class ='basic'/> 
< div id =basic-modal-content2>对话框2< / div> 
< input type ='button'name ='basic'value ='Demo'class ='basic'/> 
< div id =basic-modal-content3>对话框3< / div> 
< / div> 
   
 
 
 
  jQuery ：
  $（document）.ready（function（）{
 $（'＃basic-modal .basic'）。 $（this）.next（'div'）。modal（）; 
 return false; 
}）; 
}）; 
  
代码非常清楚。对于每个对话框实例，都有一个单独的div元素，其中包含单独的html。 
 
 
 
对于CSS，
 
 
 
此插件为 containerId 提供了一个选项，可用于向容器分配自定义ID。您还可以为不同的CSS使用相同的ID。
 
 
 
演示： http://jsfiddle.net/lotusgodkk/GCu2D/227/  
 
 
 
  jQuery： 
  $（'＃basic-modal .basic'）click（function（e）{
 var c = $（this）。 next（'div'）; 
 var id = c.attr（'id'）+'_ c'; //创建一个自定义ID。
 c.modal（{
 containerId：id ，
}）; 
 return false; 
}）; 
  
 CSS：
 ＃basic-modal-content1_c {
 background-color：green; 
} 
＃basic-modal-content2_c {
 background-color：red; 
} 
＃basic-modal-content3_c {
 background-color：yellow; 
} 
  
通过这种方式，您可以更改CSS。请参考插件的可自定义选项。我相信你可以使用它们为您的目的。
 
I tried the simple modal of Eric martin modal plugin.
And I got a little difficulty. I did one modal on Html page but what if I want some more modals in one HTML page like I did the first one-just with different background and content?

HTML:
<div id='content'>

    <div id='basic-modal'>



 <a href='#' class='basic'>white whine</a>


 <div id="basic-modal-content">

 <p> text text text</p>
          </div>  
          </div>
          </div> 
jQuery:
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$('#basic-modal .basic').click(function (e) {
    $('#basic-modal-content').modal();


    return false;
});
});

解决方案
It should be easy for you unless you are not opening them simultaneously. Because the plugin uses id for it's containers and some elements in plugins. And having same id in a page will create issues in your code.

Here is the demo : http://jsfiddle.net/lotusgodkk/GCu2D/226/

HTML:
<div id='basic-modal'>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content1">Dialog 1</div>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content2">Dialog 2</div>
    <input type='button' name='basic' value='Demo' class='basic' />
    <div id="basic-modal-content3">Dialog 3</div>
</div>
jQuery:
$(document).ready(function () {
    $('#basic-modal .basic').click(function (e) {
        $(this).next('div').modal();
        return false;
    });
});
Code is pretty much clear. For every dialog instance, there is a separate div element which  contains separate html. As far as the background is concerned, you can do it by giving CSS styles to the dialog containers.

For CSS,

This plugin provides an option for containerId which can be used for assigning custom Id to the container. Also you can use same ID for different CSS.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/227/

jQuery:
    $('#basic-modal .basic').click(function (e) {
    var c =  $(this).next('div');
    var id = c.attr('id')+'_c'; // create a custom Id.
    c.modal({
        containerId:id, 
    });
    return false;
});
CSS:
#basic-modal-content1_c{
    background-color:green;
}
#basic-modal-content2_c{
    background-color:red;
}
#basic-modal-content3_c{
    background-color:yellow;
}
In this way you can change the CSS. Please refer the customizable options of plugin. I am pretty sure you can use them for your purpose.

                        
这篇关于jQuery简单的多个模态在一个html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！