Fatal编程技术网
  • javascript/
  • Javascript 如何在单击按钮时打开模式弹出窗口

Javascript 如何在单击按钮时打开模式弹出窗口

javascript jquery

Javascript 如何在单击按钮时打开模式弹出窗口,javascript,jquery,modal-dialog,Javascript,Jquery,Modal Dialog,我有这个链接按钮： <a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a> 更新（图片） 我认为主要问题在于此代码： <a href=""> 由于href中没有任何值，因此无论何时单击按钮，它都会单击该锚定标记，页面将刷新。您可以使用以下选项： <a href="java

我有这个链接按钮：

<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a>
更新（图片）

我认为主要问题在于此代码：

<a href="">
由于href中没有任何值，因此无论何时单击按钮，它都会单击该锚定标记，页面将刷新。您可以使用以下选项：

<a href="javascript:void(0);">
或者在click函数上，您可以获取事件并使用preventDefault

希望这对你有帮助。
谢谢。

我认为主要问题在于此代码：

<a href="">
由于href中没有任何值，因此无论何时单击按钮，它都会单击该锚定标记，页面将刷新。您可以使用以下选项：

<a href="javascript:void(0);">
或者在click函数上，您可以获取事件并使用preventDefault

希望这对你有帮助。
谢谢。

如果您正在使用引导，请参阅下面的示例

<div class="modal fade" id="modelWindow" role="dialog">
            <div class="modal-dialog modal-sm vertical-align-center">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Heading</h4>
                </div>
                <div class="modal-body">
                    Body text here
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                </div>
              </div>
            </div>
        </div>



$('#btn').click(function() {
   $('#modelWindow').modal('show');
});


&时代；
标题
正文
关
$（'#btn'）。单击（函数（）{
$（'#modelWindow'）.model（'show'）；
});
如果您使用的是引导，请参见下面的示例

<div class="modal fade" id="modelWindow" role="dialog">
            <div class="modal-dialog modal-sm vertical-align-center">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Heading</h4>
                </div>
                <div class="modal-body">
                    Body text here
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                </div>
              </div>
            </div>
        </div>



$('#btn').click(function() {
   $('#modelWindow').modal('show');
});


&时代；
标题
正文
关
$（'#btn'）。单击（函数（）{
$（'#modelWindow'）.model（'show'）；
});
我没有使用一些定制的css或js就得到了它。它与bootstrap.js和bootsrap.css一起使用

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>


<!--> Your Dialog Field -->
<div class="dialog">
      Some Text Some Captions and/or images etc..

     <button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
 
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
      <h1>Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals</h1>
</div>
</html>


您的对话框字段-->
一些文本、一些标题和/或图像等。。
显示更多
您的模态字段-->
情态动词的一些文本
情态动词的一些文本
情态动词的一些文本
情态动词的一些文本
有更好的例子（），但是它不需要自己的js就可以工作。

我不需要使用一些定制的css或js就可以得到它。它与bootstrap.js和bootsrap.css一起使用

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>


<!--> Your Dialog Field -->
<div class="dialog">
      Some Text Some Captions and/or images etc..

     <button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
 
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
      <h1>Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals</h1>
</div>
</html>


您的对话框字段-->
一些文本、一些标题和/或图像等。。
显示更多
您的模态字段-->
情态动词的一些文本
情态动词的一些文本
情态动词的一些文本
情态动词的一些文本
有更好的例子（），但这在没有自己的js的情况下是有效的。

始终包括您迄今为止在那里尝试过的内容，以便人们能够指出哪里出错了我更新了我的问题！这是我尝试过但没有结果的东西。总是包括你迄今为止尝试过的东西，这样人们就可以指出哪里出错了。我更新了我的问题！这是我尝试过但没有结果的东西。是的，你是对的！我更新了我的问题。如果愿意，请看一看。请在document.ready函数中编写js代码，然后重试。谢谢。我这么做了，但没有改变。在你更新的图片上，我可以看到左边的模型。但看起来像是css问题。不知怎的，它超出了你的视野。你能打个比方吗？我没看到你的答案！这是
css
问题，我想我已经解决了！谢谢！是的，你是对的！我更新了我的问题。如果愿意，请看一看。请在document.ready函数中编写js代码，然后重试。谢谢。我这么做了，但没有改变。在你更新的图片上，我可以看到左边的模型。但看起来像是css问题。不知怎的，它超出了你的视野。你能打个比方吗？我没看到你的答案！这是
css
问题，我想我已经解决了！谢谢！我可以看到模式，但由于某些原因，它位于页面左侧，我只能注意到关闭按钮。如果我缩小页面，它就会正确显示。有什么想法吗？@platanas20将模式div移出所有内容，只需将其保留在正文中，其他部分没有。我可以看到模式，但出于某种原因，它位于页面的左侧，我只能注意到关闭按钮。如果我缩小页面，它就会正确显示。有什么想法吗？@platanas20将模式div移出所有内容，只需将其保留在正文中，而不是其他部分。