Question

我正在尝试使用onclick命令打开一个对话框，但我没有任何运气。我已经尝试过所有的东西而且我可以让它发挥作用。

这里是对话框jQuery：

<script type="text/javascript">
        $(function runDialog(){
            $('#testimonialOpen').dialog({
                autoOpen:false
                });
            })
    </script>

有一个div id'd testimonialOpen所以我知道它正在选择元素，并且当autoOpen被删除时对话框工作，但是，当我尝试调用这样的函数时：

<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p>

它什么也没做。我尝试在jQuery中使用'open'命令，但它仍然没有做任何想法？

Answer 1

首先，您的ready处理程序有语法错误。其次，如果你使用jQuery，你应该使用它来附加你的事件，而不是笨拙和过时的onclick属性。

试试这个：

<p class="topper">
    Top words
    <a href="#">
        <img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/>
    </a>
</p>

$(function() {
    $('#testimonialOpen').dialog({
        autoOpen:false
    });

    $(".topper a").click(function(e) {
        e.preventDefault();
        $('#testimonialOpen').dialog('open');
    });
});

Answer 2

试试此代码

＆＃13;

 $(function() {
  $("#ok_link").click(function(e) {
        e.preventDefault();
        $('#dialog-confirm').dialog('open');
    });

  $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:160,
      modal: true,
      minWidth: 400,
      autoOpen:false,
      buttons: {
        "OK": function() {
          location.href="index.html";
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

＆＃13;

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<a href="index.html" id="ok_link">OK</a>

<div id="dialog-confirm" title="Are you sure to go home?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p>
</div>

＆＃13;

jQuery UI对话框onClick事件

2 个答案: