- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已经创建了图像缩略图并使用以下代码链接了该缩略图。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
</head>
<body>
<!--thumbnail section-->
<section class="container">
<div class="row add-bottom text-center">
<a href="#migrant" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image" class="img-responsive center-block">
</a>
<br />
<br />
<a href="#water" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image1" class="img-responsive center-block">
</a>
</div>
</section>
<!--Modal Content-->
<div class="modal fade" id="migrant" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Migrants</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently when Steinbeck was awarded the Nobel Prize in 1962
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="water" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Water</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae, they are one of the two largest families of flowering
plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
现在我想将导航按钮(上一个和下一个)添加到模态窗口,该窗口将显示图像以及描述图像的段落。因此,一旦显示模态窗口,我就不必关闭窗口并一遍又一遍地返回缩略图。一次,通过添加导航按钮显示模态窗口我想去寻找所需的图像及其描述。我怎么可能去做这个?
最佳答案
您可以使用 javascript 模态 API 来隐藏当前模态并显示您想要的任何内容。
例如,我将一个函数关联到模态按钮来执行此操作:
<body>
<!--thumbnail section-->
<section class="container">
<div class="row add-bottom text-center">
<a href="#migrant" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image" class="img-responsive center-block">
</a>
<br />
<br />
<a href="#water" class="thumbnail" data-toggle="modal">
<img src=".." alt="Project Image1" class="img-responsive center-block">
</a>
</div>
</section>
<!--Modal Content-->
<div class="modal fade" id="migrant" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Migrants</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="migrant01" class="pull-right">The Grapes of Wrath is an Amer list novel written by John Steinbeck and published in 1939. The book won the National Book Award and Pulitzer Prize for fiction, and it was cited prominently
when Steinbeck was awarded the Nobel Prize in 1962
</p>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="showModal('water')">Next</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="water" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Water</h3>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<div class="modal-footer txt_center">
<p>
<img src=".." alt="water01" class="pull-right">The Orchidaceae are a diverse and widespread family of flowering plants, with blooms that are often colourful and often fragrant, commonly known as the orchid family. Along with the Asteraceae,
they are one of the two largest families of flowering plants. The Orchidaceae have about 27,800 currently accepted species, distributed in about 880 genera
</p>
</div>
</div>
<div class="modal-footer">
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="showModal('migrant')">Previous</button>
</div>
</div>
</div>
</div>
</div>
<script>
function showModal(id) {
$(".modal").modal('hide');
$("#" + id).modal();
}
</script>
</body>
https://jsfiddle.net/vegdyf48/
JavaScript API: https://getbootstrap.com/javascript/#via-javascript
关于javascript - 如何将导航按钮(上一个和下一个)添加到模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37120255/
是否有更快的算法来计算 (n! modulo m)。在每个乘法步骤都比减少更快。并且有没有比左右二元法更快的算法来计算 (a^p modulo m)。 这是我的代码:n!模数m ans=1 for(i
我有非常简单的代码循环遍历数组中的元素并检查是否index % 2 == 0。如果是这样,它应该改变颜色。 var e = document.getElementById("list").childN
让我简短一点。我正在计算 alert((Math.pow(7,35))%71) 但它给了我 61,而结果必须是 70。怎么了? 最佳答案 正如其他人之前提到的关于使用 Math.pow(7,35) 的
我试图弄清楚如何在汇编中计算模 10,所以我在 gcc 中编译了以下 c 代码,看看它想出了什么。 unsigned int i=999; unsigned int j=i%10; 令我惊讶的是我得到
例如使用以下输入: int num = -100 int divisor = 10 => -100 mod 10 = 0 (Edge-case: negative numbers as inpu
这个问题在这里已经有了答案: Random float number generation (14 个答案) 关闭 9 年前。 在 C++ 中,我希望得到一个随机 float 。据我所知,典型的随机
我试图找到潜在阶乘素数的除数(n!+-1 形式的数),因为我最近购买了 Skylake-X 工作站,我认为我可以使用 AVX512 指令提高一些速度。 算法简单,主要步骤是对同一个除数重复取模。主要是
我有一个保存角度(以度为单位)的变量,该角度可以是正值也可以是负值。我现在需要确保该数字仅在 0 到 360 之间。该数字是 double 。 执行此操作的好算法是什么?简单地执行角度 % 360 是
我有一个 UInt8 数组,我想计算 CheckSum8 模 256。如果字节总和小于 255,checkSum 函数返回正确的值。 例如 let bytes1 : [UInt8] = [1, 0xa
使用海湾合作委员会: printf("%i \n", -1 % (int)4); printf("%u \n", -1 % (unsigned int)4); 输出: -1 3 我可以跨平台依赖这种行
我无法理解代码中几行的含义。我最近开始学习 C++,并阅读了 Bjarne Stroustrup 的“编程:使用 C++ 的原理和实践”。第四章有个问题让我很困惑,所以我在网上搜索了一个解决方案以供引
我试图解决一个涉及大阶乘模质数的问题,并在另一个人的解决方案中发现了以下算法: long long factMod (long long n, long long p) { long long
我正在尝试计算 𝐹𝑛 模 𝑚,其中 𝑛 可能非常大:高达 10^18,𝐹𝑛 是第 n 个斐波那契数这是我的代码,它适用于小数字,但对于大数字,它会抛出 OutOfMemoryError 或
我有两个以 16 为模的循环整数,因此它们的值介于 0 和 15 之间。 我需要比较两个数字以确定 n_1 是否大于 n_0 n_1 > n_0 很明显,这个没有准确定义,所以我定义n_1如果小于前面
我一直在尝试使用 Java 处理一些更大的值,但遇到了一些我不理解的问题。出于某种原因,Java 似乎喜欢给我垃圾数据(尽管,我更可能告诉它给我垃圾数据) 这是一个片段,为清楚起见进行了编辑:
好吧,我今天做了一个小函数,它应该会生成一个随机字符串。 std::string randString(size_t length) { std::string randStr; fo
Ruby 的负数取模规则不明确。在 IRB 中: -7 % 3 == 2 应该是1!为什么? 最佳答案 因为 -7/3 在 Ruby 的整数除法语义下是 -3。 3*-3 是 -9,所以会留下 2
这个问题在这里已经有了答案: Calculating pow(a,b) mod n (14 个答案) 关闭 6 年前。 在 Javascript 中是否有获取大数模数的技巧。我用 modulo(7,
此代码使用公式 (a^x) % 101 检查值 a 是否唯一映射到值 1 到 100 local function f(a) found = {} bijective = true
在《Core Java Volume1》一书中有一条警告: CAUTION: The right-hand side argument of the shift operators is reduce
我是一名优秀的程序员,十分优秀!