从HTML外部打开模态

Open modal from outside of HTML

本文关键字：模态 外部 HTML      更新时间：2023-09-26

我正在学习创建一个简单模态的教程，但说明解释了如何从调用它的HTML中的按钮打开它。

<html>
<head>
</style>
  <!-- Don't forget to include jQuery ;) -->
  <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <!-- Modal HTML embedded directly into document -->
  <div id="ex1" style="display:none;">
    <p>Thanks for clicking.  That felt good.  <a href="#" rel="modal:close">Close</a> or press ESC</p>
  </div>
  <!-- I WANT TO ACTIVATE THIS ACTION FROM A JAVASCRIPT FILE -->
  <p><a href="#ex1" rel="modal:open">Open Modal</a></p>
</body>
</html>

如果我想从链接的js文件打开它，我该怎么做？

通用解决方案

为了简单起见，为该事件分配一个ID：

<a id="testID" href="#ex1" rel="modal:open">Open Modal</a>

然后只需点击该元素即可。

JQuery:

$("#testID").click();

JQuery模态特定解决方案

只需调用此即可打开一个模态：

$("#testID").modal();

要以编程方式关闭，请将ID"testClose"分配给模态中的某个元素，并运行此操作来关闭模态：

$("#testClose").modal({closeExisting: true});

可能的改进可实现更细微的控制

我注意到jquery-modal使用诸如"modal:open"之类的自定义事件，所以理论上您也可以称之为：

$("#testID").trigger("modal:before-block");
$("#testID").trigger("modal:block");
$("#testID").trigger("modal:before-open");
$("#testID").trigger("modal:open");

然而，这个对我不起作用。只需使用.click()。

相关文章：